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 { makeVar } from '@apollo/client';
    
    export const cartItemsVar = makeVar([]);
    <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">makeVar</span><span class="token generic class-name"><span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">></span></span></span><span class="token punctuation">(</span>value<span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">)</span><span class="token operator">:</span> ReactiveVar<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">></span> <span class="token keyword">import</span> makeVar</code></pre>
    Docs
    0
  • import { makeVar } from '@apollo/client';
    
    const cartItemsVar = makeVar([]);
    <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">makeVar</span><span class="token generic class-name"><span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">></span></span></span><span class="token punctuation">(</span>value<span class="token operator">:</span> <span class="token constant">T</span><span class="token punctuation">)</span><span class="token operator">:</span> ReactiveVar<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">></span> <span class="token keyword">import</span> makeVar</code></pre>
    Docs
    0
  • const cartItems = makeVar([]);
    <pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">const</span> cartItems<span class="token operator">:</span> <span class="token builtin">any</span></code></pre>
    Docs
    0
  • const cartItemsVar = makeVar([]);
    
    cartItemsVar([100, 101, 102]);
    
    // Output: [100, 101, 102]
    console.log(cartItemsVar());
    
    cartItemsVar([456]);
    
    // Output: [456]
    console.log(cartItemsVar());
    <pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">const</span> cartItemsVar<span class="token operator">:</span> <span class="token builtin">any</span></code></pre>
    Docs
    0
  • const cartItemsVar = makeVar([]);
    
    // Output: []
    console.log(cartItemsVar());
    <pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">const</span> cartItemsVar<span class="token operator">:</span> <span class="token builtin">any</span></code></pre>
    Docs
    0
  • import { from, HttpLink } from '@apollo/client';
    import { RetryLink } from '@apollo/client/link/retry';
    import MyAuthLink from '../auth';
    
    const additiveLink = from([
      new RetryLink(),
      new MyAuthLink(),
      new HttpLink({ uri: 'http://localhost:4000/graphql' })
    ]);
    <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">const</span> <span class="token function-variable function">from</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">links<span class="token operator">:</span> <span class="token punctuation">(</span>ApolloLink <span class="token operator">|</span> RequestHandler<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> ApolloLink <span class="token keyword">import</span> <span class="token keyword">from</span></code></pre>
    Docs
    0
  • import { ApolloLink, from } from '@apollo/client';
    
    const timeStartLink = new ApolloLink((operation, forward) => {
      operation.setContext({ start: new Date() });
      return forward(operation);
    });
    
    const logTimeLink = new ApolloLink((operation, forward) => {
      return forward(operation).map((data) => {
        // data from a previous link
        const time = new Date() - operation.getContext().start;
        console.log(`operation ${operation.operationName} took ${time} to complete`);
        return data;
      })
    });
    
    const additiveLink = from([
      timeStartLink,
      logTimeLink
    ]);
    <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">ApolloLink</span> <span class="token keyword">import</span> ApolloLink</code></pre>
    Docs
    0
  • import { ApolloClient, HttpLink, ApolloLink, InMemoryCache, from } from '@apollo/client';
    
    const httpLink = new HttpLink({ uri: '/graphql' });
    
    const authMiddleware = new ApolloLink((operation, forward) => {
      // add the authorization to the headers
      operation.setContext(({ headers = {} }) => ({
        headers: {
          ...headers,
          authorization: localStorage.getItem('token') || null,
        }
      }));
    
      return forward(operation);
    })
    
    const activityMiddleware = new ApolloLink((operation, forward) => {
      // add the recent-activity custom header to the headers
      operation.setContext(({ headers = {} }) => ({
        headers: {
          ...headers,
          'recent-activity': localStorage.getItem('lastOnlineTime') || null,
        }
      }));
    
      return forward(operation);
    })
    
    const client = new ApolloClient({
      cache: new InMemoryCache(),
      link: from([
        authMiddleware,
        activityMiddleware,
        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
    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 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
  • 
    
    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}`);
            }
          }
        }),
        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
  • 
    
    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
  • Powered by Official black Bloop logo with a period
    download the IDE extension

    View other examples