How to use the @shopify/async.createResolver function in @shopify/async

export function createAsyncContext({
  id,
  load,
}: Options): AsyncContextType {
  const resolver = createResolver({id, load});
  const Context = React.createContext(null);

  // Just like a "normal" value returned from `createContext`, rendering
  // the value itself is not supported. This component is just a placeholder
  // to provide a more useful error.
  function Root() {
    throw new Error(
      'Do not attempt to render the result of calling `createAsyncContext()` directly. Render its `.Provider` component instead.',
    );
  }

  function Provider(props: ProviderProps) {
    const {load, resolved} = useAsync(resolver, {
      assets: AssetTiming.Immediate,
    });

export function createAsyncQuery({
  id,
  load,
}: Options): AsyncDocumentNode<
  Data,
  Variables,
  DeepPartial
> {
  const resolver = createResolver({id, load});

  function usePreload() {
    return useAsync(resolver, {assets: AssetTiming.NextPage}).load;
  }

  function usePrefetch(options: VariableOptions) {
    const load = usePreload();
    return useBackgroundQuery(load, options);
  }

  function useKeepFresh(
    options: VariableOptions & Pick,
  ) {
    const load = usePreload();
    return useBackgroundQuery(load, {pollInterval: 10_000, ...options});
  }

usePreload: useCustomPreload = noopUse,
  usePrefetch: useCustomPrefetch = noopUse,
  useKeepFresh: useCustomKeepFresh = noopUse,
}: Options<
  Props,
  PreloadOptions,
  PrefetchOptions,
  KeepFreshOptions
>): AsyncComponentType<
  ComponentType,
  Props,
  PreloadOptions,
  PrefetchOptions,
  KeepFreshOptions
> {
  const resolver = createResolver({id, load});
  const componentName = displayName || displayNameFromId(resolver.id);
  const deferred = defer != null;
  const progressivelyHydrated = deferHydration != null;
  const scriptTiming =
    deferred || progressivelyHydrated
      ? AssetTiming.CurrentPage
      : AssetTiming.Immediate;
  const stylesTiming = deferred
    ? AssetTiming.CurrentPage
    : AssetTiming.Immediate;

  function Async(props: Props) {
    const {resolved: Component, load, loading, error} = useAsync(resolver, {
      scripts: scriptTiming,
      styles: stylesTiming,
      immediate: !deferred,