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

  • // const client = ...
    
    client
      .query({
        query: gql`
          query GetRates {
            rates(currency: "USD") {
              currency
            }
          }
        `,
      })
      .then((result) => console.log(result));
    
    Docs
    0
  • import {
      ApolloClient,
      InMemoryCache,
    } from "@apollo/client";
    
    const client = new ApolloClient({
      cache: new InMemoryCache(),
      uri: "/graphql",
    });
    
    client.query({
      query: MY_QUERY,
      context: {
        // example of setting the headers with context per operation
        headers: {
          special: "Special header value",
        },
      },
    });
    
    Docs
    0
  • // Invoke the query and log the person's name
    client.query({ query }).then((response) => {
      console.log(response.data.name);
    });
    
    Docs
    0
  • client.writeQuery({
      query: gql`
        query WriteTodo($id: Int!) {
          todo(id: $id) {
            id
            text
            completed
          }
        }
      `,
      data: {
        // Contains the data to write
        todo: {
          __typename: "Todo",
          id: 5,
          text: "Buy grapes 🍇",
          completed: false,
        },
      },
      variables: {
        id: 5,
      },
    });
    
    Docs
    0
  • client.writeQuery({
      query: gql`
        query GetCartItems {
          cartItems
        }
      `,
      data: {
        cartItems: [],
      },
    });
    
    Docs
    0
  • client.writeQuery({
      query: gql`
        query Feed($type: FeedType!) {
          feed(type: $type)
            @connection(key: "feed", filter: ["type"]) {
            id
          }
        }
      `,
      variables: {
        type: "top",
      },
      data: {
        feed: [],
      },
    });
    
    Docs
    0
  • // 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
    0
  • import React from "react";
    import {
      ApolloConsumer,
      useApolloClient,
      useQuery,
      gql,
    } from "@apollo/client";
    
    const GET_MESSAGE_COUNT = gql`
      query GetMessageCount {
        messageCount @client {
          total
        }
      }
    `;
    
    const resolvers = {
      Query: {
        messageCount: (_, args, { cache }) => {
          // ... calculate and return the number of messages in
          // the cache ...
          return {
            total: 123,
            __typename: "MessageCount",
          };
        },
      },
    };
    
    export function MessageCount() {
      const client = useApolloClient();
      client.addResolvers(resolvers);
    
      const {
        loading,
        data: { messageCount },
      } = useQuery(GET_MESSAGE_COUNT);
    
      if (loading) return "Loading ...";
    
      return (
        

    Total number of messages: {messageCount.total}

    ); }
    Docs
    0
  • const { loading, error, data } = useQuery(GET_DOGS, {
      fetchPolicy: "no-cache",
    });
    
    Docs
    0
  • function App() {
      const { data } = useQuery(IS_LOGGED_IN);
      return data.isLoggedIn ?  : ;
    }
    
    Docs
    0
  • const GET_DOG = gql`
      query GetDog($dogId: ID!) {
        dog(id: $dogId) {
          name
          breed
        }
      }
    `;
    
    function Dog({ id }) {
      const { loading, error, data } = useQuery(GET_DOG, {
        variables: { dogId: id },
      }); // ...render component...
    }
    
    Docs
    0
  • import React from "react";
    import {
      ApolloConsumer,
      useApolloClient,
      useQuery,
      gql,
    } from "@apollo/client";
    
    const GET_MESSAGE_COUNT = gql`
      query GetMessageCount {
        messageCount @client {
          total
        }
      }
    `;
    
    const resolvers = {
      Query: {
        messageCount: (_, args, { cache }) => {
          // ... calculate and return the number of messages in
          // the cache ...
          return {
            total: 123,
            __typename: "MessageCount",
          };
        },
      },
    };
    
    export function MessageCount() {
      const client = useApolloClient();
      client.addResolvers(resolvers);
    
      const {
        loading,
        data: { messageCount },
      } = useQuery(GET_MESSAGE_COUNT);
    
      if (loading) return "Loading ...";
    
      return (
        

    Total number of messages: {messageCount.total}

    ); }
    Docs
    0
  • function ExchangeRates() {
      const { loading, error, data } = useQuery(EXCHANGE_RATES);
      if (loading) return 

    Loading...

    ; if (error) return

    Error :(

    ; return data.rates.map(({ currency, rate }) => (

    {currency}: {rate}

    )); }
    Docs
    0
  • // 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
    0
  • Powered by Official black Bloop logo with a period
    download the IDE extension

    View other examples