Skip to main content

refetchQueries

Overview​

refetchQueries is analogous to refetchQueries option passed to useMutation.
It enables refetching queries after a mutation has executed.

Usage​

Let's modify bookState to refetch the full list of books from the server instead of modifying the cache on the client when AddBook mutation is executed.

library/states/book.state.ts
import { state } from '@apollo-orbit/react';
import { AddBookDocument, BooksDocument } from '../../graphql';

export const bookState = state(descriptor => descriptor
  .refetchQueries(AddBookDocument, info => [BooksDocument])
  .mutationUpdate(AddBookDocument, (cache, info) => {
    const addBook = info.data?.addBook;
    if (!addBook) return;
    cache.updateQuery({ query: BooksDocument }, data => data ? { books: [...data.books, addBook] } : data);
  })
);

Now, whenever AddBook mutation is executed, Books query will be refetched from the server and any components watching Books query will be updated with the new data.

API​

type InternalRefetchQueriesInclude = Array<string | DocumentNode | ApolloClient.QueryOptions> | 'all' | 'active';

Combining handlers​

Across states and mutation options, lists are merged and empty lists ignored. Shorthands combine with all taking precedence over active. Mixing a non-empty list with a shorthand throws.