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

  • const httpLink = createHttpLink({ uri: "server.com/graphql" });
    const restLink = new RestLink({ uri: "api.server.com" });
    
    const client = new ApolloClient({
      cache: new InMemoryCache(),
      link: ApolloLink.from([authLink, restLink, errorLink, retryLink, httpLink])
      // Note: httpLink is terminating so must be last, while retry & error wrap
      // the links to their right. State & context links should happen before (to
      // the left of) restLink.
    });
    <pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">const</span> httpLink<span class="token operator">:</span> <span class="token builtin">any</span></code></pre>
    Docs
    0
  • import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client';
    import { setContext } from '@apollo/client/link/context';
    
    const httpLink = createHttpLink({
      uri: '/graphql',
    });
    
    const authLink = setContext((_, { headers }) => {
      // get the authentication token from local storage if it exists
      const token = localStorage.getItem('token');
      // return the headers to the context so httpLink can read them
      return {
        headers: {
          ...headers,
          authorization: token ? `Bearer ${token}` : "",
        }
      }
    });
    
    const client = new ApolloClient({
      link: authLink.concat(httpLink),
      cache: new InMemoryCache()
    });
    <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,
      createHttpLink,
      InMemoryCache
    } from '@apollo/client';
    
    const client = new ApolloClient({  ssrMode: true,  link: createHttpLink({    uri: 'http://localhost:3010',    credentials: 'same-origin',    headers: {      cookie: req.header('Cookie'),    },  }),  cache: new InMemoryCache(),});
    <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,
      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
  • import { HttpLink } from "@apollo/client";
    
    const link = new HttpLink({ uri: "/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">class</span> <span class="token class-name">HttpLink</span> <span class="token keyword">import</span> HttpLink</code></pre>
    Docs
    0
  • import { ApolloLink, HttpLink } from '@apollo/client';
    import { RetryLink } from '@apollo/client/link/retry';
    
    const directionalLink = new RetryLink().split(
      (operation) => operation.getContext().version === 1,
      new HttpLink({ uri: "http://localhost:4000/v1/graphql" }),
      new HttpLink({ uri: "http://localhost:4000/v2/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">class</span> <span class="token class-name">ApolloLink</span> <span class="token keyword">import</span> ApolloLink</code></pre>
    Docs
    0
  • import fetch from 'cross-fetch';
    import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client';
    
    export const client = new ApolloClient({
      link: new HttpLink({
        uri: 'http://localhost:8888/.netlify/functions/graphql_faunadb',
        fetch,
      }),
      cache: new InMemoryCache()
    });
    
    <pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">import</span> fetch</code></pre>
    /panacloud-modern-global-apps/jamstack-serverless mit
    0
  • const customFetch = (uri, options) => {
      const { header } = Hawk.client.header(
        "http://example.com:8000/resource/1?b=1&a=2",
        "POST",
        { credentials: credentials, ext: "some-app-data" }
      );
      options.headers.Authorization = header;
      return fetch(uri, options);
    };
    
    const link = new HttpLink({ fetch: customFetch });
    <pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">const</span> <span class="token function-variable function">customFetch</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">uri<span class="token operator">:</span> any<span class="token punctuation">,</span> options<span class="token operator">:</span> any</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token builtin">Promise</span><span class="token operator">&lt;</span>Response<span class="token operator">></span></code></pre>
    Docs
    0
  • //...
    // import ApolloClientIDB from '@wora/apollo-offline/lib/ApolloClientIDB';
    
    const httpLink = new HttpLink({
      uri: "http://localhost:4000/graphql"
    });
    
    const cacheOptions = {
      dataIdFromObject: o => o.id
    };
    
    const client = new ApolloClient({
      link: httpLink,
      cache: new ApolloCache(cacheOptions)
    });
    
    
    
    //...
    
    <pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">const</span> httpLink<span class="token operator">:</span> <span class="token builtin">any</span></code></pre>
    /morrys/offline-examples mit
    0
  • //...
    import { ApolloCache } from "@wora/apollo-cache";
    import { HttpLink } from "apollo-link-http";
    
    const localIP = "localhost";
    const httpLink = new HttpLink({
      uri: "http://" + localIP + ":3000/graphql",
    });
    
    const cacheOptions = {
      dataIdFromObject: (o) => o.id,
    };
    
    console.log("cache", ApolloCache);
    
    
    
    //...
    
    <pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">import</span> ApolloCache</code></pre>
    /morrys/offline-examples mit
    0
  • import { ApolloLink } from "apollo-link";
    import { createHttpLink } from "apollo-link-http";
    import { onError } from "apollo-link-error";
     
    import { logout } from "./logout";
     
    const httpLink = createHttpLink({ uri: "/graphql" });
    const errorLink = onError(({ networkError }) => {
      if (networkError.statusCode === 401) {
        logout();
      }
    });
     
    // use with apollo-client
    // use with apollo-client
    const link = errorLink.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">ApolloLink</span> <span class="token keyword">import</span> ApolloLink</code></pre>
    Docs
    0
  • import VueApollo from 'vue-apollo';
    import { ApolloClient } from 'apollo-client';
    import { createHttpLink } from 'apollo-link-http';
    import { InMemoryCache } from 'apollo-cache-inmemory';
    import fragmentMatcher from '@parameter1/base-cms-graphql-fragment-types/fragment-matcher';
    
    export default new VueApollo({
      defaultClient: new ApolloClient({
        link: createHttpLink({ uri: '/__graphql' }),
        cache: new InMemoryCache({ fragmentMatcher }),
      }),
    });
    
    <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">VueApollo</span> <span class="token keyword">import</span> VueApollo</code></pre>
    /parameter1/base-cms MIT
    0
  • import { createHttpLink } from "apollo-link-http";
     
    const link = createHttpLink({ uri: "/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">createHttpLink</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">linkOptions<span class="token operator">?</span><span class="token operator">:</span> FetchOptions</span><span class="token punctuation">)</span> <span class="token operator">=></span> ApolloLink <span class="token keyword">import</span> createHttpLink</code></pre>
    Docs
    0
  • const customFetch = (uri, options) =&gt; {
      const { operationName } = JSON.parse(options.body);
      return fetch(`${uri}/graph/graphql?opname=${operationName}`, options);
    };
     
    const link = createHttpLink({ fetch: customFetch });
    <pre class="typing-tooltip"><code data-language="javascript" class="language-javascript"><span class="token keyword">const</span> <span class="token function-variable function">customFetch</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">uri<span class="token operator">:</span> any<span class="token punctuation">,</span> options<span class="token operator">:</span> any</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token builtin">Promise</span><span class="token operator">&lt;</span>Response<span class="token operator">></span></code></pre>
    Docs
    0
  • import { createHttpLink } from "apollo-link-http";
    import ApolloClient from "apollo-client";
    import { InMemoryCache } from "apollo-cache-inmemory";
     
    const client = new ApolloClient({
      link: createHttpLink({ uri: "/graphql" }),
      cache: new InMemoryCache()
    });
     
    // a query with apollo-client
    // a query with apollo-client
    client.query({
      query: MY_QUERY,
      context: {
        // example of setting the headers with context per operation
    // 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">const</span> <span class="token function-variable function">createHttpLink</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">linkOptions<span class="token operator">?</span><span class="token operator">:</span> FetchOptions</span><span class="token punctuation">)</span> <span class="token operator">=></span> ApolloLink <span class="token keyword">import</span> createHttpLink</code></pre>
    Docs
    0
  • import { ApolloLink } from '@apollo/client';
    
    const authLink = new ApolloLink((operation, forward) => {
      operation.setContext(({ headers }) => ({ headers: {
        authorization: Auth.userId(), // however you get your token
        ...headers
      }}));
      return forward(operation);
    });
    <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
    1
  • import { ApolloLink } from '@apollo/client';
    
    const reportErrors = (errorCallback) => new ApolloLink((operation, forward) => {
      const observable = forward(operation);
      // errors will be sent to the errorCallback
      observable.subscribe({ error: errorCallback })
      return observable;
    });
    
    const link = reportErrors(console.error);
    <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
    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
  • import { ApolloLink } from '@apollo/client';
    
    const timeStartLink = new ApolloLink((operation, forward) => {
      operation.setContext({ start: new Date() });
      return forward(operation);
    });
    <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 { ApolloLink } from '@apollo/client';
    
    const consoleLink = new ApolloLink((operation, forward) => {
      console.log(`starting request for ${operation.operationName}`);
      return forward(operation).map((data) => {
        console.log(`ending request for ${operation.operationName}`);
        return data;
      })
    })
    <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
  • Powered by Official black Bloop logo with a period
    download the IDE extension

    View other examples