react-nativereact-navigationapollohasurareact-apollo-hooks

Using React Navigation with Apollo's useQuery


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.


Solution

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