How to use @shopify/react-effect - 8 common examples

serializedVariables,
    normalizedFetchPolicy,
    errorPolicy,
    pollInterval,
    notifyOnNetworkStatusChange,
  ]);

  const queryObservable = useMemo(() => {
    if (skip || !watchQueryOptions) {
      return;
    }

    return client.watchQuery(watchQueryOptions);
  }, [client, skip, watchQueryOptions]);

  useServerEffect(() => {
    if (queryObservable == null) {
      return;
    }

    const result = queryObservable.getCurrentResult();
    return result.loading ? queryObservable.result() : undefined;
  });

  const defaultResult = useMemo>(
    () => createDefaultResult(client, variables, queryObservable),
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [queryObservable, client, serializedVariables],
  );

  const [responseId, setResponseId] = useState(0);

export async function getUsedAssets(
  element: ReactElement,
  ...args: Arguments
) {
  const asyncAssets = new AsyncAssetManager();

  await extract(element, {
    decorate: element => (
      
        {element}
      
    ),
  });

  return asyncAssets.used(...args);
}

export function useAsyncAsset(
  id?: string,
  {scripts, styles}: {styles?: AssetTiming; scripts?: AssetTiming} = {},
) {
  const async = useContext(AsyncAssetContext);

  useServerEffect(
    () => {
      if (async && id) {
        async.markAsUsed(id, {scripts, styles});
      }
    },
    async ? async.effect : undefined,
  );
}

export function useDomEffect(
  perform: (manager: HtmlManager) => () => void,
  inputs: unknown[] = [],
) {
  const manager = useContext(HtmlContext);
  const effect = () => {
    perform(manager);
  };

  useServerEffect(effect, manager.effect);
  useEffect(effect, [manager, ...inputs]);
}

export function useNetworkEffect(perform: (network: NetworkManager) => void) {
  const network = useContext(NetworkContext);

  useServerEffect(() => {
    if (network != null) {
      return perform(network);
    }
  }, network ? network.effect : undefined);
}

function Serialize({data}: SerializeProps) {
    const manager = React.useContext(HtmlContext);

    useServerEffect(
      () => {
        const result = data();
        const handleResult = manager.setSerialization.bind(manager, id);

        return typeof result === 'object' && result != null && isPromise(result)
          ? result.then(handleResult)
          : handleResult(result);
      },
      manager ? manager.effect : undefined,
    );

    return null;
  }

function Providers({children}: {children: React.ReactElement}) {
      return (
        
          
            
              {children}
            
          
        
      );
    }

    try {
      const app = render(ctx);
      await extract(app, {
        decorate(element) {
          return (
            
              {element}
            
          );
        },
        afterEachPass({renderDuration, resolveDuration, index, finished}) {
          const pass = `Pass number ${index} ${
            finished ? ' (this was the final pass)' : ''
          }`;
          const rendering = `Rendering took ${renderDuration}ms`;
          const resolving = `Resolving promises took ${resolveDuration}ms`;

          logger.log(pass);
          logger.log(rendering);

return async function render(ctx: RenderContext) {
    const app = renderFunction(ctx);
    const networkManager = new NetworkManager();
    const htmlManager = new HtmlManager();

    try {
      await extract(app, {
        decorate(app) {
          return (
            
              
                {app}
              
            
          );
        },
      });
    } catch (error) {
      logger.error(error);
      throw error;
    }

    applyToContext(ctx, networkManager);