Error: Apollo has been already created

Error: Apollo has been already created

我是 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>

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