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 { 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"
        }
      }
    });
    <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
    1
  • // Invoke the query and log the person's name
    client.query({ query }).then(response => {
      console.log(response.data.name);
    });
    <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
  • // const client = ...
    
    client
      .query({
        query: gql`
          query GetRates {
            rates(currency: "USD") {
              currency
            }
          }
        `
      })
      .then(result => console.log(result));
    <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
  • 
    
    const client = new ApolloClient({
      link: ApolloLink.from([
        onError(({ graphQLErrors, networkError }) => {
          if (graphQLErrors) {
            graphQLErrors.map(({ message, locations, path }) => console.log(`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`));
            if (networkError) {
              console.log(`[Network error]: ${networkError}`);
            }
          }
        }),
        new HttpLink({
          uri: 'http://localhost:8000/graphql',
        }),
     ]),
     cache: new InMemoryCache(),
    });
    
    
    <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>
    /PacktPublishing/Hands-on-Full-Stack-Web-Development-with-GraphQL-and-React MIT
    0
  • 
    
    const client = new ApolloClient({
      link: ApolloLink.from([
        onError(({ graphQLErrors, networkError }) => {
          if (graphQLErrors) {
            graphQLErrors.map(({ message, locations, path, extensions }) => {
              if(extensions.code === 'UNAUTHENTICATED') {
                localStorage.removeItem('jwt');
                client.resetStore();
              }
              console.log(`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`);
            });
            if (networkError) {
              console.log(`[Network error]: ${networkError}`);
            }
          }
        }),
        AuthLink,
        createUploadLink({
          uri: 'http://localhost:8000/graphql',
          credentials: 'same-origin',
        }),
      ]),
      cache: new InMemoryCache().restore(window.__APOLLO_STATE__)
    });
    
    
    <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>
    /PacktPublishing/Hands-on-Full-Stack-Web-Development-with-GraphQL-and-React MIT
    0
  • 
    
    const client = new ApolloClient({
      link: ApolloLink.from([
        onError(({ graphQLErrors, networkError }) => {
          if (graphQLErrors) {
            graphQLErrors.map(({ message, locations, path, extensions }) => {
              if(extensions.code === 'UNAUTHENTICATED') {
                localStorage.removeItem('jwt');
                client.resetStore();
              }
              console.log(`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`);
            });
            if (networkError) {
              console.log(`[Network error]: ${networkError}`);
            }
          }
        }),
        InfoLink,
        AuthLink,
        link
      ]),
      cache: new InMemoryCache().restore(window.__APOLLO_STATE__)
    });
    
    
    <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>
    /PacktPublishing/Hands-on-Full-Stack-Web-Development-with-GraphQL-and-React MIT
    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
  • 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"
        }
      }
    });
    <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
    1
  • import {
      ApolloClient,
      InMemoryCache,
      HttpLink,
      ApolloLink
    } from "@apollo/client";
    import { asyncMap } from "@apollo/client/utilities";
    
    import { usdToEur } from './currency';
    
    const httpLink = new HttpLink({ uri: '/graphql' });
    
    const usdToEurLink = new ApolloLink((operation, forward) => {
      return asyncMap(forward(operation), async (response) => {
        let data = response.data;
        if (data.price && data.currency === "USD") {
          data.price = await usdToEur(data.price);
          data.currency = "EUR";
        }
        return response;
      });
    });
    
    const client = new ApolloClient({
      cache: new InMemoryCache(),
      link: usdToEurLink.concat(httpLink)
    });
    <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
    1
  • //...
    const client = new ApolloClient({
      cache: cache,
      link: splitLink,
      name: "yet-to-be-named decision app BackEnd",
      version: "1.3",
      queryDeduplication: false,
      defaultOptions: {
        watchQuery: {
          fetchPolicy: "cache-and-network",
        },
      },
    });
    
    export default client;
    
    <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>
    /aaspinwall/collab mit
    0
  • 
    
    function createApolloClient() {
      return new ApolloClient({
        ssrMode: typeof window === 'undefined',
        link: new HttpLink({
          uri: 'https://nextjs-graphql-with-prisma-simple.vercel.app/api', // Server URL (must be absolute)
          credentials: 'same-origin', // Additional fetch() options like `credentials` or `headers`
        }),
        cache: new InMemoryCache({
          typePolicies: {
            Query: {
              fields: {
                allPosts: concatPagination(),
              },
            },
          },
        }),
      })
    }
    
    
    <pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">function</span> <span class="token function">createApolloClient</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">any</span></code></pre>
    /vercel/next.js mit
    0
  • //...
    function createApolloClient() {
      return new ApolloClient({
        ssrMode: typeof window === 'undefined',
        link: createIsomorphLink(),
        cache: new InMemoryCache(),
      })
    }
    
    
    
    //...
    
    <pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">function</span> <span class="token function">createApolloClient</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">any</span></code></pre>
    /vercel/next.js mit
    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
  • 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 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
  • // 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
  • Powered by Official black Bloop logo with a period
    download the IDE extension

    View other examples