@shopify/react-graphql/build/esm/hooks/graphql-document.mjs

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

import { useState, useCallback, useEffect } from 'react';
import { useMountedRef } from '@shopify/react-hooks';
import { useAsyncAsset } from '@shopify/react-async';

function useGraphQLDocument(documentOrAsyncDocument) {
  const [document, setDocument] = useState(() => {
    if (isDocumentNode(documentOrAsyncDocument)) {
      return documentOrAsyncDocument;
    } else {
      return documentOrAsyncDocument.resolver.resolved;
    }
  });
  const mounted = useMountedRef();
  const loadDocument = useCallback(async () => {
    if (!isDocumentNode(documentOrAsyncDocument)) {
      try {
        const resolved = await documentOrAsyncDocument.resolver.resolve();
        if (mounted.current) {
          setDocument(resolved);
        }
      } catch (error) {
        throw Error('error loading GraphQL document');
      }
    }
  }, [documentOrAsyncDocument, mounted]);
  useEffect(() => {
    if (!document) {
      loadDocument();
    }
  }, [document, loadDocument]);
  useAsyncAsset(isDocumentNode(documentOrAsyncDocument) ? undefined : documentOrAsyncDocument.resolver.id);
  return document;
}
function isDocumentNode(arg) {
  return Boolean(arg && arg.kind && arg.kind === 'Document');
}

export { useGraphQLDocument as default };