A set of self-serializing providers for @shopify/react-html applications
Last updated 10 months ago by shopify-dep .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @shopify/react-self-serializers 
SYNC missed versions from official npm registry.


Note: This module is now deprecated. Use the following packages instead.

@shopify/react-app-bridge-universal-provider @shopify/react-graphql-universal-provider` @shopify/react-i18n-universal-provider @shopify/react-universal-provider

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

A set of self-serializing providers for @shopify/react-html applications.

Table of contents

  1. Installation
  2. Self-serializers
  3. Usage


$ yarn add @shopify/react-self-serializers

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.



A self-serializing provider for @shopify/i18n's I18nManager.


The component takes an object containing the React children to render and any options to use when configuring the I18nManager to provide to the tree.

interface Props {
  locale?: string;
  country?: string;
  currency?: string;
  timezone?: string;
  pseudolocalize?: boolean;
  fallbackLocale?: string;
  onError?: ((error: I18nError) => void);
  children?: React.ReactNode;


// App.tsx

import {I18n} from '@shopify/react-self-serializers/I18n';

function App({locale}: {locale?: string}) {
  return <I18n locale={locale}>{/* rest of the app */}</I18n>;


A self-serializing provider for initial GraphQL data from Apollo.


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.


interface Props {
  children?: React.ReactNode;
  createClient(): ApolloClient<any>;
// App.tsx
import {ApolloClient} from 'apollo-client';
import {InMemoryCache} from 'apollo-inmemory-cache';
import {createHttpLink} from 'apollo-link-http';

import {GraphQL} from '@shopify/react-self-serializers/GraphQL';

function App({
}: {
  server?: boolean;
  shop?: string;
  accessToken?: string;
}) {
  const createClient = () => {
    const link = createHttpLink({
      uri: `https://${shop}/admin/api/graphql`,
      headers: {'X-Shopify-Access-Token': accessToken},

    return new ApolloClient({
      cache: new InMemoryCache(),
      ssrMode: server,
      ssrForceFetchDelay: 100,
      connectToDevTools: !server,

  return <GraphQL createClient={}>{/* rest of the app */}</GraphQL>;


This factor function will create a Self Serialized Provider given a React Context object. It is particularly useful for simple object that need to be sync up between the server and client.


The function takes a unique id and a React Context object.


The resulting Provider takes children and a data prop.


interface Props {
  data?: Data;
  children?: React.ReactNode;
import {createContext} from 'react';
import {createSelfSerializer} from '@shopify/react-self-serializers/create-self-serializer';

export const ApiKeyContext = createContext<string | null>(null);
export const ApiKeyProvider = createSelfSerializer('api-key', ApiKeyContext);
// App.tsx
import {ApiKeyProvider} from './ApiKeyProvider';

function App({apiKey}: {apiKey?: string}) {
  return <ApiKeyProvider data={apiKey}>{/* rest of the app */}</ApiKeyProvider>;


A self-serializing provider for @shopify/app-bridge-react's Provider.


The component takes children, apiKey, shop, and forceRedirect. Similar to @shopify/app-bridge-react's Provider.

interface Props {
  apiKey?: string;
  shop?: string;
  forceRedirect?: boolean;
  children?: React.ReactNode;


// App.tsx
import {AppBridge} from '@shopify/react-self-serializers/AppBridge';
function App({apiKey, shop}: {apiKey?: string; shop?: string}) {
  return <AppBridge config={{apiKey, shop}}>{/* rest of the app */}</AppBridge>;

Current Tags

  • 1.3.15                                ...           latest (10 months ago)

25 Versions

  • 1.3.15                                ...           10 months ago
  • 1.3.14                                ...           10 months ago
  • 1.3.13                                ...           10 months ago
  • 1.3.12 [deprecated]           ...           10 months ago
  • 1.3.11 [deprecated]           ...           10 months ago
  • 1.3.10 [deprecated]           ...           10 months ago
  • 1.3.9 [deprecated]           ...           10 months ago
  • 1.3.8 [deprecated]           ...           10 months ago
  • 1.3.6 [deprecated]           ...           10 months ago
  • 1.3.5 [deprecated]           ...           10 months ago
  • 1.3.3 [deprecated]           ...           10 months ago
  • 1.3.2 [deprecated]           ...           10 months ago
  • 1.3.1 [deprecated]           ...           10 months ago
  • 1.3.0 [deprecated]           ...           10 months ago
  • 1.2.1 [deprecated]           ...           10 months ago
  • 1.2.0 [deprecated]           ...           10 months ago
  • 1.1.1 [deprecated]           ...           10 months ago
  • 1.1.0 [deprecated]           ...           10 months ago
  • 1.0.7 [deprecated]           ...           10 months ago
  • 1.0.6 [deprecated]           ...           a year ago
  • 1.0.5 [deprecated]           ...           a year ago
  • 1.0.4 [deprecated]           ...           a year ago
  • 1.0.3 [deprecated]           ...           a year ago
  • 1.0.1 [deprecated]           ...           a year ago
  • 1.0.0 [deprecated]           ...           a year ago
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (0)
Dependents (0)

Copyright 2014 - 2017 © taobao.org |