Updating UI after a useMutation

I built a page similar to the UserList.js (in the GRANDstack starter project, ui-react) where I can search for articles in our Product Data Graph.
To delete an article from the list (and in the graph), I use the useMutation react hook from Apollo Server.

  const [deleteArtikel] = useMutation(
        refetchQueries: [
          { query: GET_ARTIKEL,
            variables: {
              first: rowsPerPage,
              offset: rowsPerPage * page,
              orderBy: orderBy + "_" + order,
              filter: getFilter()

According to the apollo docs, refetchQueries should fetch the queries the results of which are currently in my cache. The problem is that it only fetches the last query or so it seems: If I change the pattern in the search field to a pattern that I searched before, my deleted article still appears in the result set.

Is there a way to refetch ALL queries or to invalidate the cache all together?

Another option would be to not use the cache at all, which is no performance problem in my case.
So I configured the fetch policy in my index.js, but it seems not to work. Either I don't understand what fetchPolicy is exactly, or there must be another place to define "I don't want to use a cache at all".

const client = new ApolloClient({
  uri: process.env.REACT_APP_GRAPHQL_URI,
  defaultOptions: {
    watchQuery: {
      fetchPolicy: 'network-only'

There are certain situations where you'll want to delete the cache and I think that Apollo now provides a few methods for that. It's also depends on what you're sometimes. There's a good apollo plug in that allows you to look at the cache and see what's happening.

1 Like