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

  •   client.writeData({
        data: {
          cartItems: []
        }
      });
    <pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">const</span> client<span class="token operator">:</span> <span class="token builtin">any</span></code></pre>
    Docs
    0
  • import { ApolloClient, InMemoryCache } from '@apollo/client';
    import { withClientState } from 'apollo-link-state';
    
    import { resolvers, defaults } from './resolvers';
    
    const cache = new InMemoryCache();
    const stateLink = withClientState({ cache, resolvers, defaults });
    
    const client = new ApolloClient({
      cache,
      link: stateLink,
    });
    
    client.onResetStore(stateLink.writeDefaults);
    <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>
    Docs
    0
  • 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);
    <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>
    Docs
    0
  • export default withApollo(graphql(PROFILE_QUERY, {
      props: ({ data: { loading, currentUser }, ownProps: { client }}) => ({
        loading,
        currentUser,
        resetOnLogout: async () => client.resetStore(),
      }),
    })(Profile));
    <pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token builtin">any</span></code></pre>
    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
      }
    });
    <pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">const</span> client<span class="token operator">:</span> <span class="token builtin">any</span></code></pre>
    Docs
    0
  •   client.writeQuery({
        query: gql`
          query GetCartItems {
            cartItems
          }
        `,
        data: {
          cartItems: []
        }
      });
    <pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">const</span> client<span class="token operator">:</span> <span class="token builtin">any</span></code></pre>
    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],
      },
    });
    <pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">const</span> query<span class="token operator">:</span> <span class="token builtin">any</span></code></pre>
    Docs
    0
  • client.writeQuery({
      query: gql`
        query Feed($type: FeedType!) {
          feed(type: $type) @connection(key: "feed", filter: ["type"]) {
            id
          }
        }
      `,
      variables: {
        type: "top",
      },
      data: {
        feed: [],
      },
    });
    <pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">const</span> client<span class="token operator">:</span> <span class="token builtin">any</span></code></pre>
    Docs
    0
  • function App() {
      const { data } = useQuery(IS_LOGGED_IN);
      return data.isLoggedIn ? <Pages /> : <Login />;
    }
    <pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">function</span> <span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token constant">JSX</span><span class="token punctuation">.</span>Element</code></pre>
    Docs
    0
  • const { loading, error, data } = useQuery(GET_DOGS, {
      fetchPolicy: "no-cache"});
    <pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">const</span> loading<span class="token operator">:</span> <span class="token builtin">any</span></code></pre>
    Docs
    0
  • function ExchangeRates() {
      const { loading, error, data } = useQuery(EXCHANGE_RATES);
      if (loading) return <p>Loading...</p>;
      if (error) return <p>Error :(</p>;
    
      return data.rates.map(({ currency, rate }) => (
        <div key={currency}>
          <p>
            {currency}: {rate}
          </p>
        </div>
      ));
    }
    <pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">function</span> <span class="token function">ExchangeRates</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">any</span></code></pre>
    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...
    }
    <pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">const</span> <span class="token constant">GET_DOG</span><span class="token operator">:</span> <span class="token builtin">any</span></code></pre>
    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 (
        <p>
          Total number of messages: {messageCount.total}
        </p>
      );
    };
    <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">namespace</span> React <span class="token keyword">import</span> React</code></pre>
    Docs
    0
  • Powered by Official black Bloop logo with a period
    download the IDE extension

    View other examples