mutation not invalidating cache and fetch order seems mixed up

[bubbaspaarx]

We are using urql in a react project to manage our fetching and mutations for a rails graphql backend. We are noobs with Graphql and learning urql as we go but have hit a stumbling block on mutations.

We are requesting a list of objects which works fine but when destroying one of the objects, the cache appears to optimistically update (good - it removes the object from the list) but before the mutation returns data, the fetch/query begins for the list of objects which goes straight to cache and returns the original list of objects. The mutation returns the original object but the cache is not invalidated and no fetch for the list occurs again. Is this normal behaviour or is our setup incorrect?

We are using graphcache to normalise the cache too

We are using a query with a variable to fetch a list of 'books' by the author id (not sure if interpolating a variable is best practice but it works) - we also return some nest associations

const BooksQuery = (authorId) => ' query { books(authorId: ${authorId}) { id publisher { id name } illustrator { id name } } } '

we then have a method to destroy a book

const DeleteBookMutation = ' mutation($id: ID!) { deleteBook(id: $id) { id } __typename } '

Both the query and the mutation work, in that the first fetches all the books and the second destroys a book. The issue is that the returned book from the mutation is not causing a refetch even though the __typename's are the same.

[JoviDeCroock]

Hey, could you show us what's being returned from this query and mutation since this should automatically happen if you are using our default cache.

For an empty list you might have to use additionalTypenames.

So deleteBook.__typename === 'Book' and books[0].__typename === 'Book'?

[bubbaspaarx]

this is our client setup

import {
  createClient,
  dedupExchange,
  fetchExchange,
  Provider
} from 'urql'
import { cacheExchange } from '@urql/exchange-graphcache'

import { baseEndpoint } from '../APIConfig'

const BASE_URL = baseEndpoint() + 'graphql'

export const GraphqlClient = createClient({
  url: BASE_URL,
  fetchOptions: () => {
    return { credentials: 'include' }
  },
  exchanges: [
    dedupExchange,
    // Replace the default cacheExchange with the new one
    cacheExchange({
      /* optional config */
    }),
    fetchExchange
  ]
})

export const UrqlProvider = Provider

Had to change the provider name as we already import Provider from react-redux.

[bubbaspaarx]

Just noticed you mentioned default cache. We removed all the cacheExchange settings and went back to basic and it's all working as intended.... very confused. Why has cacheExchange caused this to not work? Do we need cacheExchange or have we not configured it correctly?

[bubbaspaarx]

from our fetch all books

{
  "books": [
    {
      "id": "129",
      "author": {
        "id": "1",
        },
        "__typename": "Author"
      },
      "__typename": "Book"
    },
   {
      "id": "130",
      "author": {
        "id": "1",
        },
        "__typename": "Author"
      },
      "__typename": "Book"
    },
],
  "__typename": "Query"
}

from our create mutation - not listed above

{
  "__typename": "Mutation",
  "createBook": {
    "__typename": "CreateBookPayload",
    "book": {
      "__typename": "Book",
      "id": "128"
    }
  }
}

from our delete

{
  "__typename": "Mutation",
  "deleteBook": {
    "__typename": "DeleteBookPayload",
    "book": {
      "__typename": "Book",
      "id": "128",
      }
    }
  }
}

[JoviDeCroock]

You are using graphCache, in a normalized cache this won't happen automatically you'll have to use cache.invalidate.

The usual cache exchange is a document based cache, this is documented here, while you are now transitioning to a normalized cache