Angular - Apollo：尚未定义客户端

Question

我正在为 graphql 使用 apollo 客户端。我在 AppApolloModule 中设置了我在 AppModule 中导入的客户端。我正在一项服务中进行查询，该服务也直接在 AppModule 中导入。虽然服务在 AppApolloModule 运行之前运行，因此在进行查询时未初始化 apollo，我收到此错误

Error: Client has not been defined yet

AppApolloModule

imports ....

export class AppApolloModule {

    constructor(
        apollo: Apollo,
        httpLink: HttpLink,
        private userService: UserService
    ) {
        console.log("apollo module")
        apollo.create({
            link: httpLink.create({ uri: `${environment.apiBase}/graphql?${this.myService.token}`}),
            cache: new InMemoryCache()
        })
    }

}

应用模块

import { AppApolloModule } from './app.apollo.module';
import { MyService } from './services/my.service';

export class AppModule {
      constructor() {
        console.log("app module")
      }
}

我没有得到两个控制台应用程序模块和 apollo 模块，因为服务首先运行，它没有找到任何已初始化的 apollo 应用程序，因此破坏了代码。

我怎样才能让 apollo 在服务或任何服务之前以高效和标准的方式运行？

Answer 1

对我有用的是删除 .angular 文件夹并再次为应用程序提供服务。

Answer 2

我有同样的问题，Apollo 的文档帮助了我。转到“https://www.apollographql.com/docs/angular/basics/setup/”或复制以下内容：

import { HttpClientModule } from "@angular/common/http";
import { ApolloModule, APOLLO_OPTIONS } from "apollo-angular";
import { HttpLinkModule, HttpLink } from "apollo-angular-link-http";
import { InMemoryCache } from "apollo-cache-inmemory";

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule,
    ApolloModule,
    HttpLinkModule
  ],
  providers: [{
    provide: APOLLO_OPTIONS,
    useFactory: (httpLink: HttpLink) => {
      return {
        cache: new InMemoryCache(),
        link: httpLink.create({
          uri: "https://o5x5jzoo7z.sse.codesandbox.io/graphql"
        })
      }
    },
    deps: [HttpLink]
  }],
})
export class AppModule {}

Answer 3

@wendellmva 的回答对我不起作用。 做了工作的是这个 repo 中建议的解决方案：

https://github.com/patricknazar/angular-lazy-loading-apollo-client

这基本上是将 Apollo 初始化放在一个单独的共享模块中，并使用 forRoot() 将其包含在您的主应用模块中。

Answer 4

这将很好地解决问题：

import {NgModule} from '@angular/core';
import {HttpClientModule} from '@angular/common/http';
import {ApolloModule, APOLLO_OPTIONS} from 'apollo-angular';
import {HttpLink, HttpLinkModule} from 'apollo-angular-link-http';
import {InMemoryCache} from 'apollo-cache-inmemory';

export function createApollo(httpLink: HttpLink) {
  return {
    link: httpLink.create({uri: 'https://api.example.com/graphql'}),
    cache: new InMemoryCache(),
  };
}

@NgModule({
  imports: [HttpClientModule, ApolloModule, HttpLinkModule],
  providers: [
    {
      provide: APOLLO_OPTIONS,
      useFactory: createApollo,
      deps: [HttpLink],
    },
  ],
})
class AppModule {}