Terms / Privacy / Search / Support

import { GET_CART_ITEMS } from './pages/cart';

export const resolvers = {
  Launch: {
    isInCart: (launch, _, { cache }) => {
      const { cartItems } = cache.readQuery({ query: GET_CART_ITEMS });
      return cartItems.includes(launch.id);
    },
  },
};<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">import</span> <span class="token constant">GET_CART_ITEMS</span>
<span class="token keyword">const</span> <span class="token constant">GET_CART_ITEMS</span><span class="token operator">:</span> <span class="token decorator"><span class="token at operator">@</span><span class="token function">apollo</span></span><span class="token operator">/</span>client<span class="token punctuation">.</span>DocumentNode</code></pre>

Docs0

  resolvers: {
    Launch: {
      isInCart: (launch, _args, { cache }) => {
        const { cartItems } = cache.readQuery({ query: GET_CART_ITEMS });
        return cartItems.includes(launch.id);
      },
    },
  },<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token punctuation">(</span>parameter<span class="token punctuation">)</span> launch<span class="token operator">:</span> <span class="token builtin">any</span></code></pre>

Docs0

import { ApolloClient, InMemoryCache, HttpLink, gql } from '@apollo/client';

const GET_CART_ITEMS = gql`
  query GetCartItems {
    cartItems @client
  }
`;

const cache = new InMemoryCache();
cache.writeQuery({
  query: GET_CART_ITEMS,
  data: {
    cartItems: [],
  },
});

const client = new ApolloClient({
  cache,
  link: new HttpLink({
    uri: 'http://localhost:4000/graphql',
  }),
  resolvers: {
    Launch: {
      isInCart: (launch, _args, { cache }) => {
        const { cartItems } = cache.readQuery({ query: GET_CART_ITEMS });
        return cartItems.includes(launch.id);
      },
    },
  },
});

const GET_LAUNCH_DETAILS = gql`
  query LaunchDetails($launchId: ID!) {
    launch(id: $launchId) {
      isInCart @client
      site
      rocket {
        type
      }
    }
  }
`;

// ... run the query using client.query, a <Query /> component, etc.<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token punctuation">(</span>alias<span class="token punctuation">)</span> <span class="token keyword">class</span> <span class="token class-name">ApolloClient<span class="token operator">&lt;</span>TCacheShape<span class="token operator">></span></span>
<span class="token keyword">import</span> ApolloClient</code></pre>

Docs0

const { todo } = cache.readQuery({
  query: gql`
    query ReadTodo {
      todo(id: 5) {
        id
        text
        completed
      }
    }
  `,
});<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">const</span> todo<span class="token operator">:</span> <span class="token builtin">any</span></code></pre>

Docs0

import { GET_CART_ITEMS } from './pages/cart';

export const resolvers = {
  Launch: {
    isInCart: (launch, _, { cache }) => {
      const { cartItems } = cache.readQuery({ query: GET_CART_ITEMS });
      return cartItems.includes(launch.id);
    },
  },
};<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">import</span> <span class="token constant">GET_CART_ITEMS</span>
<span class="token keyword">const</span> <span class="token constant">GET_CART_ITEMS</span><span class="token operator">:</span> <span class="token decorator"><span class="token at operator">@</span><span class="token function">apollo</span></span><span class="token operator">/</span>client<span class="token punctuation">.</span>DocumentNode</code></pre>

Docs0

  resolvers: {
    Launch: {
      isInCart: (launch, _args, { cache }) => {
        const { cartItems } = cache.readQuery({ query: GET_CART_ITEMS });
        return cartItems.includes(launch.id);
      },
    },
  },<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token punctuation">(</span>parameter<span class="token punctuation">)</span> launch<span class="token operator">:</span> <span class="token builtin">any</span></code></pre>

Docs0

import { ApolloClient, InMemoryCache, gql } from '@apollo/client';

let nextTodoId = 0;

const cache = new InMemoryCache();

cache.writeQuery({
  query: gql`query GetTodos { todos { ... } }`,
  data: { todos: [] },
});

const client = new ApolloClient({
  resolvers: {
    Mutation: {
      addTodo: (_, { text }, { cache }) => {
        const query = gql`
          query GetTodos {
            todos @client {
              id
              text
              completed
            }
          }
        `;

        const previous = cache.readQuery({ query });
        const newTodo = { id: nextTodoId++, text, completed: false, __typename: 'TodoItem' };
        const data = {
          todos: [...previous.todos, newTodo],
        };

        cache.writeQuery({ query, data });
        return newTodo;
      },
    },
  },
});<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token punctuation">(</span>alias<span class="token punctuation">)</span> <span class="token keyword">class</span> <span class="token class-name">ApolloClient<span class="token operator">&lt;</span>TCacheShape<span class="token operator">></span></span>
<span class="token keyword">import</span> ApolloClient</code></pre>

Docs0

import { ApolloClient, InMemoryCache, HttpLink, gql } from '@apollo/client';

const GET_CART_ITEMS = gql`
  query GetCartItems {
    cartItems @client
  }
`;

const cache = new InMemoryCache();
cache.writeQuery({
  query: GET_CART_ITEMS,
  data: {
    cartItems: [],
  },
});

const client = new ApolloClient({
  cache,
  link: new HttpLink({
    uri: 'http://localhost:4000/graphql',
  }),
  resolvers: {
    Launch: {
      isInCart: (launch, _args, { cache }) => {
        const { cartItems } = cache.readQuery({ query: GET_CART_ITEMS });
        return cartItems.includes(launch.id);
      },
    },
  },
});

const GET_LAUNCH_DETAILS = gql`
  query LaunchDetails($launchId: ID!) {
    launch(id: $launchId) {
      isInCart @client
      site
      rocket {
        type
      }
    }
  }
`;

// ... run the query using client.query, a <Query /> component, etc.<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token punctuation">(</span>alias<span class="token punctuation">)</span> <span class="token keyword">class</span> <span class="token class-name">ApolloClient<span class="token operator">&lt;</span>TCacheShape<span class="token operator">></span></span>
<span class="token keyword">import</span> ApolloClient</code></pre>

Docs0

cache.writeQuery({
  query: IS_LOGGED_IN,
  data: {
    isLoggedIn: !!localStorage.getItem("token"),
  },
});<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">const</span> cache<span class="token operator">:</span> <span class="token builtin">any</span></code></pre>

Docs0

import { ApolloClient, InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  cache: new InMemoryCache(),
  resolvers: {
    Mutation: {
      updateVisibilityFilter: (_, { visibilityFilter }, { cache }) => {
        cache.writeQuery({
          query: gql`query GetVisibilityFilter { visibilityFilter }`,
          data: {
            __typename: 'Filter',
            visibilityFilter,
          },
        });
      },
    },
  },
};<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token punctuation">(</span>alias<span class="token punctuation">)</span> <span class="token keyword">class</span> <span class="token class-name">ApolloClient<span class="token operator">&lt;</span>TCacheShape<span class="token operator">></span></span>
<span class="token keyword">import</span> ApolloClient</code></pre>

Docs0

import { InMemoryCache } from '@apollo/client';

const cache = new InMemoryCache();
cache.writeQuery({
  query: gql`query MyQuery {
    isLoggedIn,
    cartItems
  }`,
  data: {
    isLoggedIn: !!localStorage.getItem('token'),
    cartItems: [],
  },
});<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token punctuation">(</span>alias<span class="token punctuation">)</span> <span class="token keyword">class</span> <span class="token class-name">InMemoryCache</span>
<span class="token keyword">import</span> InMemoryCache</code></pre>

Docs0

import { ApolloClient, InMemoryCache } from '@apollo/client';

const cache = new InMemoryCache();
const client = new ApolloClient({
  cache,
  resolvers: { /* ... */ },
});

cache.writeQuery({
  query: gql`
    query GetTodosNetworkStatusAndFilter {
      todos
      visibilityFilter
      networkStatus {
        isConnected
      }
    }
  `,
  data: {
    todos: [],
    visibilityFilter: 'SHOW_ALL',
    networkStatus: {
      __typename: 'NetworkStatus',
      isConnected: false,
    },
  },
});<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token punctuation">(</span>alias<span class="token punctuation">)</span> <span class="token keyword">class</span> <span class="token class-name">ApolloClient<span class="token operator">&lt;</span>TCacheShape<span class="token operator">></span></span>
<span class="token keyword">import</span> ApolloClient</code></pre>

Docs0

import { ApolloClient, InMemoryCache, HttpLink, gql } from '@apollo/client';

const query = gql`
  query CurrentAuthorPostCount($authorId: Int!) {
    currentAuthorId @client @export(as: "authorId")
    postCount(authorId: $authorId) @client
  }
`;

const cache = new InMemoryCache();
const client = new ApolloClient({
  cache,
  resolvers: {
    Query: {
      postCount(_, { authorId }) {
        return authorId === 12345 ? 100 : 0;
      },
    },
  },
});

cache.writeQuery({
  query: gql`{ currentAuthorId }`,
  data: {
    currentAuthorId: 12345,
  },
});

// ... run the query using client.query, the <Query /> component, etc.<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token punctuation">(</span>alias<span class="token punctuation">)</span> <span class="token keyword">class</span> <span class="token class-name">ApolloClient<span class="token operator">&lt;</span>TCacheShape<span class="token operator">></span></span>
<span class="token keyword">import</span> ApolloClient</code></pre>

Docs0

const todo = cache.readFragment({
  id: '5', // The value of the to-do item's unique identifier
  fragment: gql`
    fragment MyTodo on Todo {
      id
      text
      completed
    }
  `,
});<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">const</span> todo<span class="token operator">:</span> <span class="token builtin">any</span></code></pre>

Docs0

import { ApolloClient, InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  resolvers: {
    Mutation: {
      toggleTodo: (_, variables, { cache }) => {
        const id = `TodoItem:${variables.id}`;
        const fragment = gql`
          fragment CompleteTodo on TodoItem {
            completed
          }
        `;
        const todo = cache.readFragment({ fragment, id });
        const data = { ...todo, completed: !todo.completed };

        cache.writeFragment({ fragment, id, data });
        return null;
      },
    },
  },
});<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token punctuation">(</span>alias<span class="token punctuation">)</span> <span class="token keyword">class</span> <span class="token class-name">ApolloClient<span class="token operator">&lt;</span>TCacheShape<span class="token operator">></span></span>
<span class="token keyword">import</span> ApolloClient</code></pre>

Docs0

const bookYearFragment = gql`
  fragment BookYear on Book {
    publicationYear
  }
`;

const fragmentResult = cache.writeFragment({
  id: cache.identify(invisibleManBook),  fragment: bookYearFragment,
  data: {
    publicationYear: '1952'
  }
});<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">const</span> bookYearFragment<span class="token operator">:</span> <span class="token builtin">any</span></code></pre>

Docs0

import { ApolloClient, InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  resolvers: {
    Mutation: {
      toggleTodo: (_, variables, { cache }) => {
        const id = `TodoItem:${variables.id}`;
        const fragment = gql`
          fragment CompleteTodo on TodoItem {
            completed
          }
        `;
        const todo = cache.readFragment({ fragment, id });
        const data = { ...todo, completed: !todo.completed };

        cache.writeFragment({ fragment, id, data });
        return null;
      },
    },
  },
});<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token punctuation">(</span>alias<span class="token punctuation">)</span> <span class="token keyword">class</span> <span class="token class-name">ApolloClient<span class="token operator">&lt;</span>TCacheShape<span class="token operator">></span></span>
<span class="token keyword">import</span> ApolloClient</code></pre>

Docs0

import { ApolloClient, InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  cache: new InMemoryCache(),
  resolvers: {
    Mutation: {
      updateUserEmail: (_, { id, email }, { cache }) => {
        cache.writeFragment({
          id: cache.identify({ __typename: "User", id }),
          fragment: gql`fragment UserEmail on User { email }`,
          data: { email },
        });
      },
    },
  },
};<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token punctuation">(</span>alias<span class="token punctuation">)</span> <span class="token keyword">class</span> <span class="token class-name">ApolloClient<span class="token operator">&lt;</span>TCacheShape<span class="token operator">></span></span>
<span class="token keyword">import</span> ApolloClient</code></pre>

Docs0

const newComment = {
  __typename: 'Comment',
  id: 'abc123',
  text: 'Great blog post!',
};

cache.modify({
  id: cache.identify(myPost),
  fields: {
    comments(existingCommentRefs = [], { readField }) {
      const newCommentRef = cache.writeFragment({
        data: newComment,
        fragment: gql`
          fragment NewComment on Comment {
            id
            text
          }
        `
      });

      // Quick safety check - if the new comment is already
      // present in the cache, we don't need to add it again.
      if (existingCommentRefs.some(
        ref => readField('id', ref) === newComment.id
      )) {
        return existingCommentRefs;
      }

      return [...existingCommentRefs, newCommentRef];
    }
  }
});<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">const</span> newComment<span class="token operator">:</span> <span class="token punctuation">{</span>
    __typename<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
    id<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
    text<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>

Docs0

const [addComment] = useMutation(ADD_COMMENT, {
  update(cache, { data: { addComment } }) {
    cache.modify({
      id: cache.identify(myPost),
      fields: {
        comments(existingCommentRefs = [], { readField }) {
          const newCommentRef = cache.writeFragment({
            data: addComment,
            fragment: gql`
              fragment NewComment on Comment {
                id
                text
              }
            `
          });
          return [...existingCommentRefs, newCommentRef];
        }
      }
    });
  }
});<pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">const</span> addComment<span class="token operator">:</span> <span class="token builtin">any</span></code></pre>