How to use where clause in Knex
Create refunds with Stripe
Load HTML with Cheerio
How to send POST request with Axios
Find intersection of array in Lodash
Powered by Official white Bloop logo with a period

Terms / Privacy / Search / Support

  • // Query that fetches all existing to-do items
    const query = gql`
      query MyTodoAppQuery {
        todos {
          id
          text
          completed
        }
      }
    `;
    
    // Get the current to-do list
    const data = client.readQuery({ query });
    
    // Create a new to-do item
    const myNewTodo = {
      id: '6',
      text: 'Start using Apollo Client.',
      completed: false,
      __typename: 'Todo',
    };
    
    // Write back to the to-do list, appending the new item
    client.writeQuery({
      query,
      data: {
        todos: [...data.todos, myNewTodo],
      },
    });
    Docs
  • const query = gql`
      query MyTodoAppQuery {
        todos {
          id
          text
          completed
        }
      }
    `;
    
    // Get the current to-do list
    const data = client.readQuery({ query });
    
    const myNewTodo = {
      id: '6',
      text: 'Start using Apollo Client.',
      completed: false,
      __typename: 'Todo',
    };
    
    // Write back to the to-do list and include the new item
    client.writeQuery({
      query,
      data: {
        todos: [...data.todos, myNewTodo],
      },
    });
    Docs
  • import React from "react";
    import { gql, useQuery } from "@apollo/client";
    
    import Todo from "./Todo";
    
    const GET_TODOS = gql`
      query GetTodos {
        todos @client {
          id
          completed
          text
        }
        visibilityFilter @client
      }
    `;
    
    function TodoList() {
      const { data: { todos, visibilityFilter } } = useQuery(GET_TODOS);
      return (
        <ul>
          {getVisibleTodos(todos, visibilityFilter).map(todo => (
            <Todo key={todo.id} {...todo} />
          ))}
        </ul>
      );
    }
    Docs
  • 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,
        },
      },
    });
    Docs
  • 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);
    Docs
  • Powered by Official black Bloop logo with a period
    download the IDE extension

    View other examples