graphql-react/Provider.mjs

A GraphQL client for React using modern context and hooks APIs that’s lightweight (< 4 kB) but powerful; the first Relay and Apollo alternative with server side rendering.

import React from "react";
import Cache from "./Cache.mjs";
import CacheContext from "./CacheContext.mjs";
import HydrationTimeStampContext from "./HydrationTimeStampContext.mjs";
import Loading from "./Loading.mjs";
import LoadingContext from "./LoadingContext.mjs";

/**
 * A React component to provide all the React context required to enable the
 * entire `graphql-react` API:
 *
 * - [Hydration time stamp context]{@link HydrationTimeStampContext}
 * - [Cache context]{@link CacheContext}
 * - [Loading context]{@link LoadingContext}
 * @kind function
 * @name Provider
 * @param {object} props Component props.
 * @param {Cache} props.cache [`Cache`]{@link Cache} instance.
 * @param {ReactNode} [props.children] React children.
 * @returns {ReactNode} React virtual DOM node.
 * @example <caption>How to import.</caption>
 * ```js
 * import Provider from "graphql-react/Provider.mjs";
 * ```
 * @example <caption>Provide a [`Cache`]{@link Cache} instance for an app.</caption>
 * ```jsx
 * import Cache from "graphql-react/Cache.mjs";
 * import Provider from "graphql-react/Provider.mjs";
 * import React from "react";
 *
 * const cache = new Cache();
 *
 * const App = ({ children }) => <Provider cache={cache}>{children}</Provider>;
 * ```
 */
export default function Provider({ cache, children }) {
  const hydrationTimeStampRef = React.useRef();
  if (!hydrationTimeStampRef.current)
    hydrationTimeStampRef.current = performance.now();

  const loadingRef = React.useRef();
  if (!loadingRef.current) loadingRef.current = new Loading();

  if (!(cache instanceof Cache))
    throw new TypeError("Prop `cache` must be a `Cache` instance.");

  return React.createElement(
    HydrationTimeStampContext.Provider,
    { value: hydrationTimeStampRef.current },
    React.createElement(
      CacheContext.Provider,
      { value: cache },
      React.createElement(
        LoadingContext.Provider,
        { value: loadingRef.current },
        children
      )
    )
  );
}