Rerun Cell Query

Get Help and Help Others
7

Got it! This thread’s references to refreshing the cache were correct.

So now inside the Empty component of my Cell – where I fetch from an external API and create a new entry in the database – I have useMutation setup like this:

const [create] = useMutation(CREATE, {
  refetchQueries: [
    {
      query: QUERY,
      variables: { id },
    },
  ],
})

At the top of the Cell I have two queries: QUERY and CREATE.

The initial QUERY looks for a reference in the database. So if nothing is found, the Empty component is loaded where I do the CREATE mutation. Problem is the initial QUERY is cached with the null response.

So with the above, when CREATE runs, the cached version of the initial QUERY is updated too. Which kicks the Cell over into the Success component.

And you get nice visual feedback of instant-loading for db entries that were found, and the Empty component displays some text while waiting for the fetch and create to finish, before loading its entry also.

6 Likes