Introduction to Apollo Cache
Apollo Cache is a powerful tool designed to optimize the performance of your GraphQL applications by storing data locally and reducing the need to fetch data from the server for every query. With a variety of useful APIs, Apollo Cache allows you to fine-tune how data is managed and accessed within your application.
Key APIs of Apollo Cache
1. InMemoryCache
The InMemoryCache is the default implementation of Apollo’s caching mechanism. It stores the data in a normalized, in-memory JavaScript object for efficient access.
import { InMemoryCache } from '@apollo/client';
const cache = new InMemoryCache();
2. writeQuery
The writeQuery method allows you to write data directly to the cache. This can be useful for updating the cache after a mutation.
cache.writeQuery({
query: GET_TODOS,
data: {
todos: [{ id: '1', text: 'Write blog post', completed: false }],
},
});
3. readQuery
The readQuery method reads data directly from the cache without making a network request.
const data = cache.readQuery({ query: GET_TODOS });
4. writeFragment
The writeFragment method allows you to write a fragment of data directly to the cache. This is useful for updating specific fields within an item.
cache.writeFragment({
id: 'Todo:1',
fragment: gql`
fragment TodoFragment on Todo {
text
completed
}
`,
data: {
text: 'Learn Apollo Cache',
completed: true,
},
});
5. readFragment
The readFragment method reads a fragment of data directly from the cache.
const todo = cache.readFragment({
id: 'Todo:1',
fragment: gql`
fragment TodoFragment on Todo {
text
completed
}
`,
});
Application Example Using Apollo Cache
Below is an example of a simple React application that utilizes Apollo Cache to manage the state of a to-do list.
import React from 'react';
import { ApolloProvider, useQuery, useMutation, gql, InMemoryCache, ApolloClient } from '@apollo/client';
const GET_TODOS = gql`
query GetTodos {
todos {
id
text
completed
}
}
`;
const ADD_TODO = gql`
mutation AddTodo($text: String!) {
addTodo(text: $text) {
id
text
completed
}
}
`;
const cache = new InMemoryCache();
const client = new ApolloClient({
uri: 'https://example.com/graphql',
cache,
});
const TodoApp = () => {
const { loading, error, data } = useQuery(GET_TODOS);
const [addTodo] = useMutation(ADD_TODO, {
update(cache, { data: { addTodo } }) {
const existingTodos = cache.readQuery({ query: GET_TODOS });
cache.writeQuery({
query: GET_TODOS,
data: { todos: [...existingTodos.todos, addTodo] },
});
},
});
if (loading) return Loading...
;
if (error) return Error :(
;
return (
{data.todos.map(todo => (
-
{todo.text} {todo.completed ? '✓' : '×'}
))}
);
};
export const App = () => (
);
By leveraging Apollo Cache, this application efficiently manages the state, providing a responsive user experience and reducing the number of network requests.
Hash: 423dc4bb272f80afa09511c18d57197d70c0394c558c738497a1a84bcb027ef8
