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
  • 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 cache = new InMemoryCache({
      typePolicies: {
        Query: {
          fields: {
            feed: {
              keyArgs: ["type"],
    
              merge(existing, incoming, {
                args: { cursor },
                readField,
              }) {
                const merged = existing ? existing.slice(0) : [];
                let offset = offsetFromCursor(merged, cursor, readField);
                // If we couldn't find the cursor, default to appending to
                // the end of the list, so we don't lose any data.
                if (offset < 0) offset = merged.length;
                // Now that we have a reliable offset, the rest of this logic
                // is the same as in offsetLimitPagination.
                for (let i = 0; i < incoming.length; ++i) {
                  merged[offset + i] = incoming[i];
                }
                return merged;
              },
    
              // If you always want to return the whole list, you can omit
              // this read function.
              read(existing, {
                args: { cursor, limit = existing.length },
                readField,
              }) {
                if (existing) {
                  let offset = offsetFromCursor(existing, cursor, readField);
                  // If we couldn't find the cursor, default to reading the
                  // entire list.
                  if (offset < 0) offset = 0;
                  return existing.slice(offset, offset + limit);
                }
              },
            },
          },
        },
      },
    });
    
    function offsetFromCursor(items, cursor, readField) {
      // Search from the back of the list because the cursor we're
      // looking for is typically the ID of the last item.
      for (let i = items.length - 1; i >= 0; --i) {
        const item = items[i];
        // Using readField works for both non-normalized objects
        // (returning item.id) and normalized references (returning
        // the id field from the referenced entity object), so it's
        // a good idea to use readField when you're not sure what
        // kind of elements you're dealing with.
        if (readField("id", item) === cursor) {
          // Add one because the cursor identifies the item just
          // before the first item in the page we care about.
          return i + 1;
        }
      }
      // Report that the cursor could not be found.
      return -1;
    }
    <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
  • const cache = new InMemoryCache({
      typePolicies: {
        Query: {
          fields: {
            feed: {
              keyArgs: ["type"],
    
              // While args.cursor may still be important for requesting
              // a given page, it no longer has any role to play in the
              // merge function.
              merge(existing, incoming, { readField }) {
                const merged = { ...existing };
                incoming.forEach(item => {
                  merged[readField("id", item)] = item;
                });
                return merged;
              },
    
              // Return all items stored so far, to avoid ambiguities
              // about the order of the items.
              read(existing) {
                return existing && Object.values(existing);
              },
            },
          },
        },
      },
    });
    <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
  • import { relayStylePagination } from "@apollo/client/utilities";
    
    const cache = new InMemoryCache({
      typePolicies: {
        Query: {
          fields: {
            comments: relayStylePagination(),
          },
        },
      },
    });
    <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 generic-function"><span class="token function">relayStylePagination</span><span class="token generic class-name"><span class="token operator">&lt;</span>TNode <span class="token operator">=</span> Reference<span class="token operator">></span></span></span><span class="token punctuation">(</span>keyArgs<span class="token operator">?</span><span class="token operator">:</span> KeyArgs<span class="token punctuation">)</span><span class="token operator">:</span> RelayFieldPolicy<span class="token operator">&lt;</span>TNode<span class="token operator">></span> <span class="token keyword">import</span> relayStylePagination</code></pre>
    Docs
    0
  • const { todo } = cache.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
  • import { GET_CART_ITEMS } from './pages/cart';
    
    export const resolvers = {
      Launch: {
        isInCart: (launch, _, { cache }) => {
          const { cartItems } = cache.readQuery({ query: GET_CART_ITEMS });
          return cartItems.includes(launch.id);
        },
      },
    };
    <pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">import</span> <span class="token constant">GET_CART_ITEMS</span> <span class="token keyword">const</span> <span class="token constant">GET_CART_ITEMS</span><span class="token operator">:</span> <span class="token decorator"><span class="token at operator">@</span><span class="token function">apollo</span></span><span class="token operator">/</span>client<span class="token punctuation">.</span>DocumentNode</code></pre>
    Docs
    0
  •   resolvers: {
        Launch: {
          isInCart: (launch, _args, { cache }) => {
            const { cartItems } = cache.readQuery({ query: GET_CART_ITEMS });
            return cartItems.includes(launch.id);
          },
        },
      },
    <pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token punctuation">(</span>parameter<span class="token punctuation">)</span> launch<span class="token operator">:</span> <span class="token builtin">any</span></code></pre>
    Docs
    0
  • import { ApolloClient, InMemoryCache, gql } from '@apollo/client';
    
    let nextTodoId = 0;
    
    const cache = new InMemoryCache();
    
    cache.writeQuery({
      query: gql`query GetTodos { todos { ... } }`,
      data: { todos: [] },
    });
    
    const client = new ApolloClient({
      resolvers: {
        Mutation: {
          addTodo: (_, { text }, { cache }) => {
            const query = gql`
              query GetTodos {
                todos @client {
                  id
                  text
                  completed
                }
              }
            `;
    
            const previous = cache.readQuery({ query });
            const newTodo = { id: nextTodoId++, text, completed: false, __typename: 'TodoItem' };
            const data = {
              todos: [...previous.todos, newTodo],
            };
    
            cache.writeQuery({ query, data });
            return newTodo;
          },
        },
      },
    });
    <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, HttpLink, gql } from '@apollo/client';
    
    const GET_CART_ITEMS = gql`
      query GetCartItems {
        cartItems @client
      }
    `;
    
    const cache = new InMemoryCache();
    cache.writeQuery({
      query: GET_CART_ITEMS,
      data: {
        cartItems: [],
      },
    });
    
    const client = new ApolloClient({
      cache,
      link: new HttpLink({
        uri: 'http://localhost:4000/graphql',
      }),
      resolvers: {
        Launch: {
          isInCart: (launch, _args, { cache }) => {
            const { cartItems } = cache.readQuery({ query: GET_CART_ITEMS });
            return cartItems.includes(launch.id);
          },
        },
      },
    });
    
    const GET_LAUNCH_DETAILS = gql`
      query LaunchDetails($launchId: ID!) {
        launch(id: $launchId) {
          isInCart @client
          site
          rocket {
            type
          }
        }
      }
    `;
    
    // ... run the query using client.query, a <Query /> component, etc.
    <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
  • cache.modify({
      id: cache.identify(myPost),
      fields(fieldValue, details) {
        return details.INVALIDATE;
      },
    });
    <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
  • cache.modify({
      id: cache.identify(myObject),
      fields: {
        name(cachedName) {
          return cachedName.toUpperCase();
        },
      },
      /* broadcast: false // Include this to prevent automatic query refresh */
    });
    <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
  • cache.modify({
      id: cache.identify(myPost),
      fields: {
        comments(existingCommentRefs, { INVALIDATE }) {
          return INVALIDATE;
        },
      },
    });
    <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
  • cache.modify({
      id: cache.identify(myPost),
      fields: {
        comments(existingCommentRefs, { DELETE }) {
          return DELETE;
        },
      },
    });
    <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
  • const idToRemove = 'abc123';
    
    cache.modify({
      id: cache.identify(myPost),
      fields: {
        comments(existingCommentRefs, { readField }) {
          return existingCommentRefs.filter(
            commentRef => idToRemove !== readField('id', commentRef)
          );
        },
      },
    });
    <pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">const</span> idToRemove<span class="token operator">:</span> <span class="token string">"abc123"</span></code></pre>
    Docs
    0
  • cache.release('my-object-id');
    <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
  • const client = new ApolloClient({
      cache: new InMemoryCache().restore(JSON.parse(window.__APOLLO_STATE__)),
      link,
      ssrForceFetchDelay: 100, // in milliseconds
    });
    <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({
      cache: new InMemoryCache().restore(JSON.parse(window.__APOLLO_STATE__)),
      uri: 'https://example.com/graphql'
    });
    <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
  • Powered by Official black Bloop logo with a period
    download the IDE extension

    View other examples