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

  • import { gql } from "apollo-boost";
    // or you can use `import gql from 'graphql-tag';` instead
    
    ...
    
    client
      .query({
        query: gql`
          {
            rates(currency: "USD") {
              currency
            }
          }
        `
      })
      .then(result => console.log(result));
    <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">function</span> <span class="token function">gql</span><span class="token punctuation">(</span><span class="token parameter">literals<span class="token operator">:</span> string <span class="token operator">|</span> readonly string<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token operator">...</span>args<span class="token operator">:</span> any<span class="token punctuation">[</span><span class="token punctuation">]</span></span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token function">DocumentNode</span> <span class="token punctuation">(</span>alias<span class="token punctuation">)</span> <span class="token keyword">namespace</span> gql <span class="token keyword">import</span> gql</code></pre>
    Docs
    0
  • function MyComponent({ data: { loading } }) {
      if (loading) {
        return <div>Loading...</div>;
      } else {
        // ...
      }
    }
    
    export default graphql(gql`query { ... }`)(MyComponent);
    <pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">function</span> <span class="token function">MyComponent</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> data<span class="token operator">:</span> <span class="token punctuation">{</span> loading <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token operator">:</span> <span class="token punctuation">{</span> data<span class="token operator">:</span> <span class="token punctuation">{</span> loading<span class="token operator">:</span> any<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token punctuation">}</span></span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">any</span></code></pre>
    Docs
    0
  • function MyComponent({ data: { variables } }) {
      return (
        <div>
          Query executed with the following variables:
          <code>{JSON.stringify(variables)}</code>
        </div>
      );
    }
    
    export default graphql(gql`query { ... }`)(MyComponent);
    <pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">function</span> <span class="token function">MyComponent</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> data<span class="token operator">:</span> <span class="token punctuation">{</span> variables <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token operator">:</span> <span class="token punctuation">{</span> data<span class="token operator">:</span> <span class="token punctuation">{</span> variables<span class="token operator">:</span> any<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token punctuation">}</span></span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">any</span></code></pre>
    Docs
    0
  • function MyComponent({ mutate }) {
      return (
        <button
          onClick={() => {
            mutate({
              variables: { foo: 42 },
            });
          }}
        >
          Mutate
        </button>
      );
    }
    
    export default graphql(gql`mutation { ... }`)(MyComponent);
    <pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">function</span> <span class="token function">MyComponent</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> mutate <span class="token punctuation">}</span><span class="token operator">:</span> <span class="token punctuation">{</span> mutate<span class="token operator">:</span> any<span class="token punctuation">;</span> <span class="token punctuation">}</span></span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">any</span></code></pre>
    Docs
    0
  • export default graphql(
      gql`
      mutation ($foo: String!, $bar: String!) {
        ...
      }
    `,
      {
        options: props => ({
          variables: {
            foo: props.foo,
            bar: props.bar,
          },
        }),
      },
    )(MyComponent);
    <pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token builtin">any</span></code></pre>
    Docs
    0
  • export default graphql(gql`query { ... }`, {
      options: { fetchPolicy: 'cache-and-network' },
    })(MyComponent);
    <pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token builtin">any</span></code></pre>
    Docs
    0
  • const { todo } = client.readQuery({
      query: gql`
        query ReadTodo($id: Int!) {
          todo(id: $id) {
            id
            text
            completed
          }
        }
      `,
      variables: {
        id: 5,
      },
    });
    <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>
    Docs
    0
  • const { todo } = client.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>
    Docs
    0
  • 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],
      },
    });
    <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
  • import ApolloClient from 'apollo-boost';
    
    // the Apollo cache is set up automatically
    const client = new ApolloClient();
    <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>TCache<span class="token operator">></span></span> <span class="token keyword">import</span> ApolloClient</code></pre>
    Docs
    0
  • const client = new ApolloClient({
      cache: new InMemoryCache().restore(window.__APOLLO_STATE__),
      link,
    });
    <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">client<span class="token operator">&lt;</span>TCache<span class="token operator">></span></span> <span class="token keyword">import</span> client <span class="token keyword">const</span> client<span class="token operator">:</span> ApolloClient<span class="token operator">&lt;</span><span class="token builtin">any</span><span class="token operator">></span></code></pre>
    Docs
    0
  • import { Accounts } from 'meteor/accounts-base'
    import ApolloClient from 'apollo-boost'
    
    const client = new ApolloClient({
      uri: '/graphql',
      request: operation =>
        operation.setContext(() => ({
          headers: {
            authorization: Accounts._storedLoginToken()
          }
        }))
    })
    <pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">import</span> Accounts</code></pre>
    Docs
    0
  • const client = new ApolloClient({
      cache: new InMemoryCache().restore(window.__APOLLO_STATE__),
      link,
      ssrForceFetchDelay: 100,
    });
    <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">client<span class="token operator">&lt;</span>TCache<span class="token operator">></span></span> <span class="token keyword">import</span> client <span class="token keyword">const</span> client<span class="token operator">:</span> ApolloClient<span class="token operator">&lt;</span><span class="token builtin">any</span><span class="token operator">></span></code></pre>
    Docs
    0
  • const cache = new InMemoryCache();
    const stateLink = withClientState({ cache, resolvers: { ... } });
    const link = ApolloLink.from([stateLink, new HttpLink({ uri: '...' })]);
    const client = new ApolloClient({
      cache,
      link,
    });
    <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>
    Docs
    0
  • Powered by Official black Bloop logo with a period
    download the IDE extension

    View other examples