错误：Apollo 已经创建

Question

我是 GraphQL 的新手。

我想做的是在文本输入上的每个 onBlur 事件上调用 GraphQL 服务器。

问题是：

• 只成功调用一次。
• 在第二次调用时，我收到此错误：

ERROR Error: Apollo has been already created.

这可能很明显，但我找不到解决方案。

有没有办法在每个连续发生的onBlur 事件上成功地进行新的 graphql 调用？

onBlurZIP(zip) {
    const zipQuery = gql`
      query {
        getAddressByPostalCode(postalCode: "${zip}") {
            country
            city
            street
            streettype
            state
            stateInitials
            quarter
        }
      }
    `;

    const httpLink = createHttpLink({
      uri: environment.endpoint
    });

    const link = setContext((_, { headers }) => {
      return {
        headers: {
          // headers object...
        }
      }
    });

    this._apollo.create({
      link: link.concat(httpLink),
      cache: new InMemoryCache()
    });

    this.querySubscription = this._apollo.watchQuery<any>({
      query: zipQuery,
      variables: { zip },
      fetchPolicy: 'network-only'
    })
    .valueChanges
    .subscribe(
      res => {
        // do stuff...
      },

      err => console.log(err)
    );
  }

HTML：

<input formControlName="zip" (blur)="onBlurZIP($event.target.value)" type="text" class="form-control" name="zip" id="zip" required>

Answer 1

Apollo 客户端实例必须是单例的。您需要在应用程序中定义一次并使用<ApolloProvider> 将其传递给组件。你可以参考 react-apollo 文档：https://www.apollographql.com/docs/react/essentials/get-started.html。

您的代码抛出错误，因为您在每个 onBlur 事件上都创建了 apollo 客户端实例。

编辑：

angular.js中初始化apollo客户端的相关文档：https://www.apollographql.com/docs/angular/basics/setup.html