How to use the @shopify/react-effect.useServerEffect function in @shopify/react-effect

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 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;
  }