CODEWITHSUNDEEP
angularapollographql-jsapollo-client
rbenvenuto
rbenvenuto

Reputation: 2425

Error: Apollo has been already created

I am fairly new to GraphQL.

What i would like to do is make a call to a GraphQL server on every onBlur event on a text Input.

The problem is:

ERROR Error: Apollo has been already created.

This may be something pretty obvious, but i can't find a solution.

Is there a way to successfully make a new graphql call on every onBlur event made consecutive times?

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)
    );
  }

The HTML:

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

Upvotes: 0

Views: 2606

Answers (1)

Raeesaa
Raeesaa

Reputation: 3316

Apollo client instance has to be singleton. You need to define it once in your application and pass it down to components using <ApolloProvider>. You can refer to react-apollo documents for the same: https://www.apollographql.com/docs/react/essentials/get-started.html.

Your code is throwing error because you are creating instance of apollo client on every onBlur event.

Edit:

Relevant document for initialising apollo client in angular.js: https://www.apollographql.com/docs/angular/basics/setup.html

Upvotes: 1

Related Questions