@shopify/react-graphql-universal-provider
A self-serializing/deserializing GraphQL provider that works for isomorphic applications
Last updated 15 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

Self serializers

A self-serializer is a React component that leverages the useSerialized() hook from @shopify/react-html to handle both serializing data during server rendering, and deserializing it on the client. The components often render React.context() providers to make their serialized state available to the rest of the app they're rendered in.

Comparison with traditional serialization techniques

Consider the I18n self-serializer. In the server you may want to set the locale based on the Accept-Language header. The client needs to be informed of this somehow to make sure React can render consistently. Traditionally you might do something like:

On the server

  • get the locale from the Accept-Language header in your node server
  • create an instance of I18nManager with that locale
  • pass the instance into your app
  • render a <Serialize name="locale" /> component in the DOM you send to the client

On the client

  • call getSerialized('locale') in your client entrypoint for your locale
  • create an instance of I18nManager with that locale
  • pass the instance into your app

In your react app's universal code

  • have your app render an <I18nProvider /> with the manager from props

With self-serializers you would instead:

On the server

  • get the locale from the Accept-Language header in your node server
  • pass the locale into your app directly

On the client

  • render your app without passing in the locale

In your react app's universal code

  • have your app render an <I18n /> with the locale from props

Since self-serializers handle the details of serialization they allow you to remove code from your client/server entrypoints and instead let the react app itself handle those concerns.

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';
const IS_SERVER = typeof window === 'undefined';

export function App({url}: {url: URL}) {
  return (
    <GraphQL server={IS_SERVER} url={url}>
      {/* rest of the app */}
    </GraphQL>
  );
}
// GraphQL.tsx
import React from 'react';
import fetch from 'cross-fetch';
import {InMemoryCache} from 'apollo-cache-inmemory';
import {createHttpLink} from 'apollo-link-http';
import {GraphQLUniversalProvider} from '@shopify/react-graphql-universal-provider';

export function GraphQL({
  server,
  url,
  children,
}: {
  server?: boolean;
  url: URL;
  children?: React.ReactNode;
}) {
  const createClientOptions = () => {
    const link = createHttpLink({
      // make sure to use absolute URL on the server
      uri: `${url.origin}/graphql`,
      fetch,
    });

    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 cookie

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

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

const IS_SERVER = typeof window === 'undefined';

export function App({url}: {url: URL}) {
  const csrfToken = useRequestHeader('x-csrf-token');

  return (
    <CsrfUniversalProvider value={csrfToken}>
      <GraphQL server={IS_SERVER} url={url}>
        {/* rest of the app */}
      </GraphQL>
    </CsrfUniversalProvider>
  );
}
// GraphQL.tsx
import React from 'react';
import fetch from 'cross-fetch';
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';

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

  const createClientOptions = () => {
    const link = createHttpLink({
      // make sure to use absolute URL on the server
      uri: `${url.origin}/graphql`,
      fetch,
      headers: {
        cookie,
      },
    });

    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 (a year ago)
  • 3.1.14                                ...           latest (15 days ago)
  • 1.0.0-sknext-beta.2                                ...           next (2 days ago)

71 Versions

  • 1.0.0-sknext-beta.2                                ...           2 days ago
  • 1.0.0-sknext-beta.1                                ...           6 days ago
  • 3.1.14-sknext-beta.9                                ...           6 days ago
  • 0.0.8-sknext-beta.8                                ...           7 days ago
  • 0.0.2-sknext-beta.2                                ...           12 days ago
  • 0.0.1-sknext-beta.1                                ...           13 days ago
  • 3.1.14                                ...           15 days ago
  • 3.1.13-async-text-cleanup-beta.2                                ...           20 days ago
  • 3.1.13-async-text-cleanup-beta.1                                ...           21 days ago
  • 3.1.13                                ...           2 months ago
  • 3.1.12                                ...           2 months ago
  • 3.1.11                                ...           2 months ago
  • 3.1.10                                ...           2 months ago
  • 3.1.9                                ...           3 months ago
  • 3.1.8                                ...           3 months ago
  • 3.1.7                                ...           4 months ago
  • 3.1.6                                ...           4 months ago
  • 3.1.5                                ...           4 months ago
  • 3.1.4                                ...           4 months ago
  • 3.1.3                                ...           4 months ago
  • 3.1.2                                ...           4 months ago
  • 3.1.1                                ...           4 months ago
  • 3.1.0                                ...           5 months ago
  • 3.0.5                                ...           5 months ago
  • 3.0.4                                ...           5 months ago
  • 3.0.3-core-js-beta.2                                ...           5 months ago
  • 3.0.3-core-js-beta.1                                ...           5 months ago
  • 3.0.3                                ...           5 months ago
  • 3.0.2                                ...           6 months ago
  • 3.0.1-12hr-format-beta.1                                ...           6 months ago
  • 3.0.1                                ...           6 months ago
  • 3.0.0                                ...           7 months ago
  • 2.1.7                                ...           7 months ago
  • 2.1.6                                ...           7 months ago
  • 2.1.5                                ...           7 months ago
  • 2.1.4                                ...           9 months ago
  • 2.1.3                                ...           9 months ago
  • 2.1.2                                ...           9 months ago
  • 2.1.1                                ...           9 months ago
  • 2.1.0                                ...           9 months ago
  • 2.0.10                                ...           9 months ago
  • 2.0.9                                ...           10 months ago
  • 2.0.8                                ...           10 months ago
  • 2.0.7                                ...           10 months ago
  • 2.0.6                                ...           10 months ago
  • 2.0.5                                ...           10 months ago
  • 2.0.4                                ...           10 months ago
  • 2.0.3                                ...           10 months ago
  • 2.0.1                                ...           10 months ago
  • 2.0.2                                ...           a year ago
  • 2.0.0                                ...           a year ago
  • 2.0.0-beta.3                                ...           a year ago
  • 2.0.0-beta.2                                ...           a year ago
  • 2.0.0-beta.1                                ...           a year ago
  • 1.1.0-beta.5                                ...           a year ago
  • 1.1.0-beta.4                                ...           a year ago
  • 1.1.0-beta.3                                ...           a year ago
  • 1.1.0-beta.2                                ...           a year ago
  • 1.1.0-beta.1                                ...           a year ago
  • 1.1.0                                ...           a year ago
  • 1.0.11                                ...           a year ago
  • 1.0.10                                ...           a year ago
  • 1.0.9                                ...           a year ago
  • 1.0.8                                ...           a year ago
  • 1.0.7                                ...           a year ago
  • 1.0.6                                ...           a year ago
  • 1.0.5                                ...           a year ago
  • 1.0.4                                ...           a year ago
  • 1.0.3                                ...           a year ago
  • 1.0.2                                ...           a year ago
  • 1.0.1                                ...           a year ago
Downloads
Today 0
This Week 12
This Month 61
Last Day 8
Last Week 44
Last Month 77
Dependencies (5)
Dev Dependencies (3)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |