Terms / Privacy / Search / Support

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;
      },
    },
  },
});

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  component, etc.

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);
    },
  },
};

Docs0

const { todo } = cache.readQuery({
  query: gql`
    query ReadTodo {
      todo(id: 5) {
        id
        text
        completed
      }
    }
  `,
});

Docs0

  resolvers: {
    Launch: {
      isInCart: (launch, _args, { cache }) => {
        const { cartItems } = cache.readQuery({ query: GET_CART_ITEMS });
        return cartItems.includes(launch.id);
      },
    },
  },

Docs0

cache.writeQuery({
  query: IS_LOGGED_IN,
  data: {
    isLoggedIn: !!localStorage.getItem("token"),
  },
});

Docs0

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

const cache = new InMemoryCache();
cache.writeQuery({
  query: gql`
    query MyQuery {
      isLoggedIn
      cartItems
    }
  `,
  data: {
    isLoggedIn: !!localStorage.getItem("token"),
    cartItems: [],
  },
});

Docs0

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

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

const cache = new InMemoryCache();
const client = new ApolloClient({
  link: new HttpLink({
    uri: "http://localhost:4000/graphql",
  }),
  cache,
  resolvers: {},
});

cache.writeQuery({
  query: gql`
    query GetCurrentAuthor {
      currentAuthor {
        name
        authorId
      }
    }
  `,
  data: {
    currentAuthor: {
      __typename: "Author",
      name: "John Smith",
      authorId: 12345,
    },
  },
});

// ... run the query using client.query, the  component, etc.

Docs0

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

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

function writeInitialData() {
  cache.writeQuery({
    query: gql`
      query GetTodosNetworkStatusAndFilter {
        todos
        visibilityFilter
        networkStatus {
          isConnected
        }
      }
    `,
    data: {
      todos: [],
      visibilityFilter: "SHOW_ALL",
      networkStatus: {
        __typename: "NetworkStatus",
        isConnected: false,
      },
    },
  });
}

writeInitialData();

client.onResetStore(writeInitialData);

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  component, etc.

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
    }
  `,
});

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;
      },
    },
  },
});

Docs0

import {
  ApolloClient,
  HttpLink,
  InMemoryCache,
} from "@apollo/client";
import { RetryLink } from "@apollo/client/link/retry";

const directionalLink = new RetryLink().split(
  (operation) => operation.getContext().version === 1,
  new HttpLink({ uri: "http://localhost:4000/v1/graphql" }),
  new HttpLink({ uri: "http://localhost:4000/v2/graphql" })
);

const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: directionalLink,
});

Docs0

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

const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: new HttpLink({ uri: 'http://localhost:4000/graphql' }),
});

client.setResolvers({ ... });

Docs0

import {
  ApolloClient,
  InMemoryCache,
} from "@apollo/client";
import { SchemaLink } from "@apollo/client/link/schema";

import schema from "./path/to/your/schema";

const graphqlClient = new ApolloClient({
  cache: new InMemoryCache(),
  ssrMode: true,
  link: new SchemaLink({ schema }),
});

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  component, etc.

Docs0

const cache = new InMemoryCache({
  typePolicies: {
    Query: {
      fields: {
        feed: {
          keyArgs: ["type"],

          // While args.cursor may still be important for requesting
          // a given page, it no longer has any role to play in the
          // merge function.
          merge(existing, incoming, { readField }) {
            const merged = { ...existing };
            incoming.forEach((item) => {
              merged[readField("id", item)] = item;
            });
            return merged;
          },

          // Return all items stored so far, to avoid ambiguities
          // about the order of the items.
          read(existing) {
            return existing && Object.values(existing);
          },
        },
      },
    },
  },
});

Docs0

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

const fragmentResult = cache.writeFragment({
  id: cache.identify(invisibleManBook),
  fragment: bookYearFragment,
  data: {
    publicationYear: "1952",
  },
});

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 },
        });
      },
    },
  },
};

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];
    },
  },
});

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];
        },
      },
    });
  },
});

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;
      },
    },
  },
});