Using React Navigation with Apollo's useQuery

Question

I have a screen where I fetch some data from Hasura. I am using something like this:

// screen1.js
const {data} = useQuery(MY_QUERY)

In screen1.js I have a button that navigates to screen2.js. And in screen2.js I have some mutation that changes the data fetched in screen1.js. When I change this data and execute the mutation, I navigate back to screen1.js. I want the data in screen1.js to be updated accordingly.

I have tried several solutions like this (as suggested in the docs):

const {data} = useQuery(MY_QUERY, {fetchPolicy: "network-only", pollInterval: 500})

But this does not work. I can't make my query a subscription because my query calls a custom action from Hasura, and I believe they only support queries and mutations.

I think a solution would be to re-render screen1.js when I navigate there, but I don't know if this is the optimal solution.

Answer 1

Try using this as your default options:

const defaultOptions = {
  watchQuery: {
    fetchPolicy: 'no-cache',
    errorPolicy: 'ignore'
  },
  query: {
    fetchPolicy: 'no-cache',
    errorPolicy: 'all'
  }
}

It should be used on something like this, depending on how you're setting up Apollo:

    this.client = new ApolloClient({
      link: concat(authMiddleware, link),
      cache: new InMemoryCache(),
      defaultOptions
    })