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

  • export default graphql(gql`query MyQuery { ... }`, {
      options: { fetchPolicy: 'cache-and-network' },
    })(MyComponent);
    <pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">const</span> graphql<span class="token operator">:</span> <span class="token operator">&lt;</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> Partial<span class="token operator">&lt;</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 operator">/</span>react<span class="token operator">/</span>hoc<span class="token punctuation">.</span>DataProps<span class="token operator">&lt;</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token operator">>></span> <span class="token operator">&amp;</span> Partial<span class="token operator">&lt;</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 operator">/</span>react<span class="token operator">/</span>hoc<span class="token punctuation">.</span>MutateProps<span class="token operator">&lt;</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token operator">>>></span><span class="token punctuation">(</span><span class="token parameter">document<span class="token operator">:</span> @apollo<span class="token operator">/</span>client<span class="token punctuation">.</span>DocumentNode<span class="token punctuation">,</span> operationOptions<span class="token operator">?</span><span class="token operator">:</span> @apollo<span class="token operator">/</span>client<span class="token operator">/</span>react<span class="token operator">/</span>hoc<span class="token punctuation">.</span>OperationOption<span class="token operator">&lt;</span><span class="token operator">...</span><span class="token operator">></span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token parameter">WrappedComponent<span class="token operator">:</span> React<span class="token punctuation">.</span>ComponentType<span class="token operator">&lt;</span><span class="token operator">...</span><span class="token operator">></span></span><span class="token punctuation">)</span> <span class="token operator">=></span> React<span class="token punctuation">.</span>ComponentClass<span class="token operator">&lt;</span><span class="token operator">...</span><span class="token operator">></span></code></pre>
    Docs
    0
  • function MyComponent({ data: { refetch } }) {
      return <button onClick={() => refetch()}>Reload</button>;
    }
    
    export default graphql(gql`query MyComponentQuery  { ... }`)(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> refetch <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> refetch<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 constant">JSX</span><span class="token punctuation">.</span>Element</code></pre>
    Docs
    0
  • class MyComponent extends Component {
      componentDidMount() {
        // In this specific case you may want to use `options.pollInterval` instead.
        this.props.data.startPolling(1000);
      }
    
      render() {
        // ...
      }
    }
    
    export default graphql(gql`query MyComponentQuery { ... }`)(MyComponent);
    <pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">class</span> <span class="token class-name">MyComponent</span></code></pre>
    Docs
    0
  • export default graphql(gql`query MyQuery { ... }`, {
      skip: props => !!props.skip,
    })(MyComponent);
    <pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">const</span> graphql<span class="token operator">:</span> <span class="token operator">&lt;</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> Partial<span class="token operator">&lt;</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 operator">/</span>react<span class="token operator">/</span>hoc<span class="token punctuation">.</span>DataProps<span class="token operator">&lt;</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token operator">>></span> <span class="token operator">&amp;</span> Partial<span class="token operator">&lt;</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 operator">/</span>react<span class="token operator">/</span>hoc<span class="token punctuation">.</span>MutateProps<span class="token operator">&lt;</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token operator">>>></span><span class="token punctuation">(</span><span class="token parameter">document<span class="token operator">:</span> @apollo<span class="token operator">/</span>client<span class="token punctuation">.</span>DocumentNode<span class="token punctuation">,</span> operationOptions<span class="token operator">?</span><span class="token operator">:</span> @apollo<span class="token operator">/</span>client<span class="token operator">/</span>react<span class="token operator">/</span>hoc<span class="token punctuation">.</span>OperationOption<span class="token operator">&lt;</span><span class="token operator">...</span><span class="token operator">></span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token parameter">WrappedComponent<span class="token operator">:</span> React<span class="token punctuation">.</span>ComponentType<span class="token operator">&lt;</span><span class="token operator">...</span><span class="token operator">></span></span><span class="token punctuation">)</span> <span class="token operator">=></span> React<span class="token punctuation">.</span>ComponentClass<span class="token operator">&lt;</span><span class="token operator">...</span><span class="token operator">></span></code></pre>
    Docs
    0
  • export default compose(
      graphql(gql`mutation CreateTodoMutation (...) { ... }`, { name: 'createTodo' }),
      graphql(gql`mutation UpdateTodoMutation (...) { ... }`, { name: 'updateTodo' }),
      graphql(gql`mutation DeleteTodoMutation (...) { ... }`, { name: 'deleteTodo' }),
    )(MyComponent);
    
    function MyComponent(props) {
      // Instead of the default prop name, `mutate`,
      // we have three different prop names.
      console.log(props.createTodo);
      console.log(props.updateTodo);
      console.log(props.deleteTodo);
    
      return null;
    }
    <pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><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
  • 
    
    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
  • 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
  • //...
    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
  • //...
    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
  • Powered by Official black Bloop logo with a period
    download the IDE extension

    View other examples