Apollo Angular Services

Question

Iam using grapqhl-codegen to convert my queries into injectable Services, Everything works like a charm, besides, I cannot updateQuerys anymore, since I only have services and I cannot pass the service into the updatesQuerys array. I want the userGql service to refetch the data, not use the cache:

loginAttempt() {
    const data = this.loginForm.value;
    this.loginGql
      .mutate({ data }, {updateQueries: [CANT ADD SERVICE HERE]})
      .pipe(
        pluck("data", "login"),
        switchMap(async (token: string) => {
          await this.storage.setToken(token);
          return this.userGql.fetch().toPromise();
        })
      )
      .subscribe((res) => console.log("res: ", res));
  }```

score 0 · Answer 1 · answered Jul 30 '20 at 12:21

If you wish to refetch a query after a mutation, you need to use refetcQueries. updateQueries is used to manually update the cache (also is deprecated, see update instead) so it would not give you what you want.

I know of at least two ways to use refetchQueries.

One is by query name, this will work when the query in question is being watched:

this.loginGql
  .mutate({ data }, { refetchQueries: ["UserQuery"] }) // <-- this
  .pipe(
    pluck("data", "login")
  )
  .subscribe((token: string) => {
    this.storage.setToken(token);
    // ... no need to manually fetch the query here
  })

Another option is to reference the service document. I believe this will force-fetch the query .

this.loginGql
  .mutate(
    {
      data
    },
    {
      refetchQueries: {
        query: this.faqQuestionsQuery.document  // <-- this
      }
    }
  )
  .pipe(
    pluck("data", "login")
  )
  .subscribe((token: string) => {
    this.storage.setToken(token);
    // ... no need to manually fetch the query here
  })

Don't forget that variables also matter here.

Apollo Angular Services

1 Answers1