Apollo React - `useMutation` in ApolloClient setup?

Question

I have an interesting situation.

I want to initiate refresh token request USING Apollo itself (a.k.a to call a mutation)

Any idea, how to achieve something like this?

export default new ApolloClient({
  link: ApolloLink.from([
    onError(({ graphQLErrors, networkError, operation, forward }) => {
      // useMutation(REFRESH_ACCESS_TOKEN)
    }),
  ]),

  new HttpLink({...}),
})

Basically I'm just trying to useMutation(REFRESH_ACCESS_TOKEN) inside onError while creating new ApolloClient instance.

The problem: Invalid hook call. Hooks can only be called inside of the body of a function component.

Thanks.

Well the main problem here is that instead of getting the access token using let's say axios I would like to fetch it using graphql's mutation. As the backend itself provides the refresh as a mutation. Or in other words the main problem is that I'm trying to use React Hooks in the Class initialization basically. — Artur Subotkevič
you're probably looking for something like github.com/sysgears/apollo-universal-starter-kit/blob/… — xadm

Daniel Rearden Daniel Rearden · Accepted Answer · 2020-02-02T19:45:05

You can't use a hook outside a functional React component. You can use the client directly to make queries and mutations -- just bear in mind that any queries ran this way will not be observable (i.e. won't be updated if the cache changes).

const client = new ApolloClient({
  link: ApolloLink.from([
    onError(({ graphQLErrors, networkError, operation, forward }) => {
      client.mutate({ mutation, variables })
        .then(({ data }) => {
          console.log(data)
        })
        .catch((error) => {
          console.log(error)
        })
    }),
    new HttpLink({...}),
  ]),
})

export default client

Apollo React - `useMutation` in ApolloClient setup?

1 Answers