Apollo - Angular：错误：未捕获（承诺）：错误：尚未定义客户端答案

【问题标题】：Apollo - Angular : Error: Uncaught (in promise): Error: Client has not been defined yetApollo - Angular：错误：未捕获（承诺）：错误：尚未定义客户端
【发布时间】：2022-12-29 08:38:36
【问题描述】：

我试图在我的角度应用程序上使用两个不同的 apollo 客户端，但出现以下错误：

Error: Uncaught (in promise): Error: Client has not been defined yet

我的graphql.模块.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 {}

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

注意：为了处理我服务的客户，我使用：

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

【问题讨论】：

标签： angular graphql lazy-loading apollo-client

【解决方案1】：

我有同样的错误。我通过在模块中同时提供 APOLLO_OPTIONS 注入令牌和 APOLLO_NAMED_OPTIONS 注入令牌来修复它。

然后我将这个模块导入到我的 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 {}

【讨论】：