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.

Have you considered or attempted using Optimstic UI when running the mutation on screen2? See: https://www.apollographql.com/docs/react/performance/optimistic-ui/ — avimoondra, Jul 13 '20 at 08:11

score 0 · Accepted Answer · answered Jul 14 '20 at 00:03

0

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

answered Jul 14 '20 at 00:03

rollingBalls

1,808
1
14
25

1

This also works, but I liked the most the Optimist UI pattern. – davidaap Jul 15 '20 at 13:30

Using React Navigation with Apollo's useQuery

1 Answers1