@shopify/react-graphql-universal-provider
A self-serializing/deserializing GraphQL provider that works for isomorphic applications.
Last updated 21 days ago by shopify-dep .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @shopify/react-graphql-universal-provider 
SYNC missed versions from official npm registry.

@shopify/react-graphql-universal-provider

Build Status License: MIT npm version npm bundle size (minified + gzip)

A self-serializing/deserializing GraphQL provider that works for isomorphic applications.

Installation

$ yarn add @shopify/react-graphql-universal-provider

Usage

Props

The component takes children and a function that can create an Apollo client. This function will be called when needed, and the resulting Apollo client will be augmented with the serialized initial data.

Basic Example

// App.tsx

import {GraphQL} from '../GraphQL';

function App({server}: {server?: boolean}) {
  return <GraphQL server={server}>{/* rest of the app */}</GraphQL>;
}
// GraphQL.tsx

import {InMemoryCache} from 'apollo-cache-inmemory';
import {createHttpLink} from 'apollo-link-http';

import {GraphQLUniversalProvider} from '@shopify/react-graphql-universal-provider';

function GraphQL({
  server,
  children,
}: {
  server?: boolean;
  children?: React.ReactNode;
}) {
  const createClientOptions = () => {
    const link = createHttpLink({
      // make sure to use absolute URL on the server
      uri: `https://your-api-end-point/api/graphql`,
    });

    return {
      link,
      cache: new InMemoryCache(),
      ssrMode: server,
      ssrForceFetchDelay: 100,
      connectToDevTools: !server,
    };
  };

  return (
    <GraphQLUniversalProvider createClientOptions={createClientOptions}>
      {children}
    </GraphQLUniversalProvider>
  );
}

You’ll know that this library is hooked up properly when the HTML response from server-side rendering:

  • contains a <script type="text/json" data-serialized-id="apollo"></script> element with the contents set to a JSON representation of the contents of the Apollo cache, and
  • does not present the loading state for any GraphQL-connected component that shows data immediately when available (this excludes any queries with a fetchPolicy that ignores the cache).

Using it with csrf token

We suggest that you use @shopify/react-csrf-universal-provider to share csrf token in your application.

This example will also show getting the csrf token and cookie using @shopify/react-network but this is certainly not an requirement.

// App.tsx

import {CsrfUniversalProvider} from '@shopify/react-csrf-universal-provider';
import {useRequestHeader} from '@shopify/react-network';
import {GraphQL} from '../GraphQL';

function App({server}: {server?: boolean}) {
  const csrfToken = useRequestHeader('x-csrf-token');

  return (
    <CsrfUniversalProvider value={csrfToken}>
      <GraphQL server={server}>{/* rest of the app */}</GraphQL>
    </CsrfUniversalProvider>
  );
}
// GraphQL.tsx

import {InMemoryCache} from 'apollo-cache-inmemory';
import {createHttpLink} from 'apollo-link-http';

import {useRequestHeader} from '@shopify/react-network';
import {GraphQLUniversalProvider} from '@shopify/react-graphql-universal-provider';
import {useCsrfToken} from '@shopify/react-csrf';

function GraphQL({
  server,
  children,
}: {
  server?: boolean;
  children?: React.ReactNode;
}) {
  const cookie = useRequestHeader('cookie');
  const csrfToken = useCsrfToken();

  const createClientOptions = () => {
    const link = createHttpLink({
      // make sure to use absolute URL on the server
      uri: `https://your-api-end-point/api/graphql`,
      headers: {
        cookie,
        'X-CSRF-Token': csrfToken,
      },
    });

    return {
      link,
      cache: new InMemoryCache(),
      ssrMode: server,
      ssrForceFetchDelay: 100,
      connectToDevTools: !server,
    };
  };

  return (
    <GraphQLUniversalProvider createClientOptions={createClientOptions}>
      {children}
    </GraphQLUniversalProvider>
  );
}

Current Tags

  • 2.0.0-beta.3                                ...           beta (3 months ago)
  • 2.1.4                                ...           latest (21 days ago)

36 Versions

  • 2.1.4                                ...           21 days ago
  • 2.1.3                                ...           a month ago
  • 2.1.2                                ...           a month ago
  • 2.1.1                                ...           a month ago
  • 2.1.0                                ...           a month ago
  • 2.0.10                                ...           a month ago
  • 2.0.9                                ...           2 months ago
  • 2.0.8                                ...           2 months ago
  • 2.0.7                                ...           2 months ago
  • 2.0.6                                ...           2 months ago
  • 2.0.5                                ...           2 months ago
  • 2.0.4                                ...           2 months ago
  • 2.0.3                                ...           2 months ago
  • 2.0.1                                ...           2 months ago
  • 2.0.2                                ...           2 months ago
  • 2.0.0                                ...           3 months ago
  • 2.0.0-beta.3                                ...           3 months ago
  • 2.0.0-beta.2                                ...           3 months ago
  • 2.0.0-beta.1                                ...           3 months ago
  • 1.1.0-beta.5                                ...           3 months ago
  • 1.1.0-beta.4                                ...           3 months ago
  • 1.1.0-beta.3                                ...           3 months ago
  • 1.1.0-beta.2                                ...           3 months ago
  • 1.1.0-beta.1                                ...           3 months ago
  • 1.1.0                                ...           3 months ago
  • 1.0.11                                ...           3 months ago
  • 1.0.10                                ...           3 months ago
  • 1.0.9                                ...           3 months ago
  • 1.0.8                                ...           3 months ago
  • 1.0.7                                ...           3 months ago
  • 1.0.6                                ...           3 months ago
  • 1.0.5                                ...           3 months ago
  • 1.0.4                                ...           3 months ago
  • 1.0.3                                ...           3 months ago
  • 1.0.2                                ...           3 months ago
  • 1.0.1                                ...           3 months ago
Downloads
Today 0
This Week 36
This Month 36
Last Day 0
Last Week 0
Last Month 85
Dependencies (4)
Dev Dependencies (3)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |