Угловая вкладка Apollo GraphQL Devtools невидимая - PullRequest
Новая
       9

Угловая вкладка Apollo GraphQL Devtools невидимая

0 голосов
/ 16 января 2019

Я занимаюсь разработкой приложения с использованием Angular 7 и клиента Apollo GraphQL и пытаюсь использовать клиент devtools для Chrome. Если я правильно понял документацию, единственное, что мне нужно сделать, это запустить свое приложение в непроизводственной среде, и вкладка Apollo появится в инструментах разработки Google Chrome.

К сожалению, этого не происходит. В моем браузере появляется значок Apollo Devtools, но вкладка Apollo не отображается в devtools.

Мне не хватает какой-то конфигурации?

Я также пытался заставить devtools появляться, добавив: connectToDevTools: true в мой модуль GraphQL (код ниже), но это не решило проблему. 

const uri = environment.graphqlURL; // <-- add the URL of the GraphQL server here
export function createApollo(httpLink: HttpLink) {
  return {
    link: httpLink.create({uri}),
    cache: new InMemoryCache(),
    connectToDevTools: true
  };
}

@NgModule({
  exports: [ApolloModule, HttpLinkModule],
  providers: [
    {
      provide: APOLLO_OPTIONS,
      useFactory: createApollo,
      deps: [HttpLink],
    },
  ],
})
export class GraphQLModule {}

1 Ответ

0 голосов
/ 16 января 2019

Я выяснил, в чем проблема: у меня возникла ошибка CORS при попытке использовать конечную точку Graphql с сервера разработки Angular (localhost:4200), поэтому я создал прокси-сервер, который указывал на мою конечную точку: 

{
  "/graphql/*": {
    "target": "https://my-endpoint/",
    "secure": false,
    "logLevel": "debug",
    "changeOrigin": true
  }
}

И изменил URL Graphql на: http://localhost:4200/graphql. Благодаря этому я смог решить проблему с CORS, однако, похоже, что Apollo Dev Tools также использует /graphql URI.

Итак, я изменил свою конфигурацию прокси на: 

{
  "/stg_graphql/*": {
    "target": "https://my-endpoint/graphql",
    "secure": false,
    "logLevel": "debug",
    "changeOrigin": true,
    "pathRewrite": {
      "^/stg_graphql": ""
    }
  }
}

И указал график: http://localhost:4200/stg_graphql. Когда я это сделал, все заработало.

Примечание: чтобы запустить сервер разработки с прокси-сервером, который я использую: ng serve --proxy-config proxy.config.json.

...