@shopify/react-graphql/build/esm/async/component.mjs

Tools for creating type-safe and asynchronous GraphQL components for React

import { useIdleCallback } from '@shopify/react-idle';
import { createAsyncQuery } from './query.mjs';
import useQuery from '../hooks/query.mjs';

function createAsyncQueryComponent(options) {
  const asyncQuery = createAsyncQuery(options);
  const {
    resolver,
    usePreload,
    usePrefetch,
    useKeepFresh
  } = asyncQuery;
  function AsyncQuery(options) {
    const result = useQuery(asyncQuery, options);
    return options.children(result);
  }
  function Preload() {
    useIdleCallback(usePreload());
    return null;
  }
  function Prefetch(options) {
    useIdleCallback(usePrefetch(options));
    return null;
  }
  function KeepFresh(options) {
    useIdleCallback(useKeepFresh(options));
    return null;
  }

  // Once we upgrade past TS 3.1, this will no longer be necessary,
  // because you can statically assign values to functions and TS
  // will know to augment its type
  const FinalComponent = AsyncQuery;
  Reflect.defineProperty(FinalComponent, 'resolver', {
    value: resolver,
    writable: false
  });
  Reflect.defineProperty(FinalComponent, 'Preload', {
    value: Preload,
    writable: false
  });
  Reflect.defineProperty(FinalComponent, 'Prefetch', {
    value: Prefetch,
    writable: false
  });
  Reflect.defineProperty(FinalComponent, 'KeepFresh', {
    value: KeepFresh,
    writable: false
  });
  Reflect.defineProperty(FinalComponent, 'usePreload', {
    value: usePreload,
    writable: false
  });
  Reflect.defineProperty(FinalComponent, 'usePrefetch', {
    value: usePrefetch,
    writable: false
  });
  Reflect.defineProperty(FinalComponent, 'useKeepFresh', {
    value: useKeepFresh,
    writable: false
  });
  return FinalComponent;
}

export { createAsyncQueryComponent };