angular - Apollo - Angular : Error: Uncaught (in promise): Error: Client has not been defined yet

Question

我尝试在我的 Angular 应用程序上使用两个不同的 apollo 客户端，但出现以下错误:

错误:未捕获( promise ):错误:尚未定义客户端

我的 graphql.module.ts 设置为按名称处理两个不同的客户端('auth' 和 'default'):

const authUri = 'http://localhost:4000/graphql/auth';
const defaultUri = 'http://localhost:4000/graphql';

export function createDefaultApollo(httpLink: HttpLink): NamedOptions {
  return {
    default: {
      // name: 'default',
      link: httpLink.create({ uri: defaultUri }),
      cache: new InMemoryCache({
        typePolicies: {
          Quotes: {
            keyFields: ['_id'],
            fields: {
              allQuotes: {
                merge: true,
              },
            },
          },
        },
      }),
    },
    auth: {
      // name: 'auth',
      link: httpLink.create({ uri: authUri }),
      cache: new InMemoryCache(),
    },
  };
}

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

然后，我在 AppModule 上导入 GraphQLModule。我猜这是与延迟加载相关的某种问题，因为第二个客户端(称为“auth”)工作正常(它是应用程序上加载的第一个模块)。但是，第一个客户端接下来加载了其他模块，我收到了错误。

注意:为了处理使用我的服务的客户，我正在使用:

return this._apollo.use('auth')
           .watchQuery<LoginApiResponse>({
                query,
                variables,
           })

Answer 1

我有同样的错误。我通过在模块中提供 APOLLO_OPTIONS 注入(inject) token 和 APOLLO_NAMED_OPTIONS 注入(inject) token 来修复它。

然后我将这个模块导入到我的 AppModule 中，它就可以工作了。

我花了很长时间才弄清楚，而且文档中的任何地方都没有提到它，但这是代码:

import { NgModule } from '@angular/core';
import { APOLLO_OPTIONS, ApolloModule, APOLLO_NAMED_OPTIONS } from 'apollo-angular';
import { BrowserModule } from '@angular/platform-browser';
import { HttpLink } from 'apollo-angular/http';
import { InMemoryCache } from '@apollo/client/core';

@NgModule({
    exports: [ApolloModule, BrowserModule],
    providers: [
        {
            provide: APOLLO_OPTIONS,
            useFactory: function () {
                return {
                    link: this.httpLink.create({ uri: 'http://localhost:3333/graphql' }),
                    cache: new InMemoryCache(),
                };
            },
            deps: [HttpLink],
        },
        {
            provide: APOLLO_NAMED_OPTIONS,
            useFactory: function () {
                return {
                    productSearch: {
                        link: this.httpLink.create({ uri: 'http://localhost:3334/graphql' }),
                        cache: new InMemoryCache(),
                    },
                };
            },
            deps: [HttpLink],
        },
    ],
})
export class GraphQLModule {}