@urql/exchange-graphcache

@urql/exchange-graphcache

An exchange for normalized caching support in urql

@urql/exchange-graphcache is a normalized cache exchange for the urql GraphQL client. This is a drop-in replacement for the default cacheExchange that, instead of document caching, caches normalized data by keys and connections between data.

You can also pass your introspected GraphQL schema to the cacheExchange, which enables it to deliver partial results and match fragments deterministically!

urql is already quite a comprehensive GraphQL client. However in several cases it may be desirable to have data update across the entirety of an app when a response updates some known pieces of data.

Learn more about Graphcache and normalized caching on our docs!

Quick Start Guide

First install @urql/exchange-graphcache alongside urql:

yarn add @urql/exchange-graphcache
# or
npm install --save @urql/exchange-graphcache

You'll then need to add the cacheExchange, that this package exposes, to your urql Client, by replacing the default cache exchange with it:

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

const client = createClient({
  url: 'http://localhost:1234/graphql',
  exchanges: [
    dedupExchange,
    // Replace the default cacheExchange with the new one
    cacheExchange({
      /* optional config */
    }),
    fetchExchange,
  ],
});

Features and Roadmap

• Normalized resolving and updates
• Schema awareness and deterministic fragment matching
• Partial query results when the cache is schema aware
• Customization using custom resolvers, updates, and keying functions
• Optimistic updates
• Basic offline and persistence support
• Advanced fragment and entity invalidation

Maintenance Status

Active: Formidable is actively working on this project, and we expect to continue for work for the foreseeable future. Bug reports, feature requests and pull requests are welcome.