How to use @shopify/network - 10 common examples

return async function verifyTokenMiddleware(
    ctx: Context,
    next: NextFunction,
  ) {
    const {session} = ctx;

    if (session && session.accessToken) {
      ctx.cookies.set(TOP_LEVEL_OAUTH_COOKIE_NAME);
      // If a user has installed the store previously on their shop, the accessToken can be stored in session.
      // we need to check if the accessToken is valid, and the only way to do this is by hitting the api.
      const response = await fetch(
        `https://${session.shop}/admin/metafields.json`,
        {
          method: Method.Post,
          headers: {
            [Header.ContentType]: 'application/json',
            'X-Shopify-Access-Token': session.accessToken,
          },
        },
      );

      if (response.status === StatusCode.Unauthorized) {
        redirectToAuth(routes, ctx);
        return;
      }

      await next();
      return;
    }

    ctx.cookies.set(TEST_COOKIE_NAME, '1');

return async function verifyTokenMiddleware(
    ctx: Context,
    next: NextFunction,
  ) {
    const {session} = ctx;

    if (session && session.accessToken) {
      ctx.cookies.set(TOP_LEVEL_OAUTH_COOKIE_NAME);
      // If a user has installed the store previously on their shop, the accessToken can be stored in session.
      // we need to check if the accessToken is valid, and the only way to do this is by hitting the api.
      const response = await fetch(
        `https://${session.shop}/admin/metafields.json`,
        {
          method: Method.Post,
          headers: {
            [Header.ContentType]: 'application/json',
            'X-Shopify-Access-Token': session.accessToken,
          },
        },
      );

      if (response.status === StatusCode.Unauthorized) {
        redirectToAuth(routes, ctx);
        return;
      }

      await next();
      return;
    }

timeout.current = setTimeout(async () => {
      if (timeout.current) {
        clearTimeout(timeout.current);
        timeout.current = undefined;
      }

      try {
        await fetch(url, {
          method: Method.Post,
          headers: {
            [Header.ContentType]: 'application/json',
          },
          body: JSON.stringify({
            connection: serializableClone((navigator as any).connection),
            events: events.current,
            navigations: navigations.current.map(navigation => ({
              details: navigation.toJSON({removeEventMetadata: false}),
              metadata: navigation.metadata,
            })),
            pathname: window.location.pathname,
          }),
        });
      } catch (error) {
        if (onError) {
          onError(error);
        }
      } finally {

export async function registerWebhook({
  address,
  topic,
  accessToken,
  shop,
  apiVersion,
}: Options) {
  const response = await fetch(
    `https://${shop}/admin/api/${apiVersion}/graphql.json`,
    {
      method: Method.Post,
      body: buildQuery(topic, address),
      headers: {
        [WebhookHeader.AccessToken]: accessToken,
        [Header.ContentType]: 'application/graphql',
      },
    },
  );

  const result = await response.json();

  if (
    result.data &&
    result.data.webhookSubscriptionCreate &&
    result.data.webhookSubscriptionCreate.webhookSubscription
  ) {
    return {success: true, result};
  } else {
    return {success: false, result};
  }
}

export async function registerWebhook({
  address,
  topic,
  accessToken,
  shop,
  apiVersion,
}: Options) {
  const response = await fetch(
    `https://${shop}/admin/api/${apiVersion}/graphql.json`,
    {
      method: Method.Post,
      body: buildQuery(topic, address),
      headers: {
        [WebhookHeader.AccessToken]: accessToken,
        [Header.ContentType]: 'application/graphql',
      },
    },
  );

  const result = await response.json();

  if (
    result.data &&
    result.data.webhookSubscriptionCreate &&
    result.data.webhookSubscriptionCreate.webhookSubscription
  ) {
    return {success: true, result};

timeout.current = setTimeout(async () => {
      if (timeout.current) {
        clearTimeout(timeout.current);
        timeout.current = undefined;
      }

      try {
        await fetch(url, {
          method: Method.Post,
          headers: {
            [Header.ContentType]: 'application/json',
          },
          body: JSON.stringify({
            connection: serializableClone((navigator as any).connection),
            events: events.current,
            navigations: navigations.current.map(navigation => ({
              details: navigation.toJSON({removeEventMetadata: false}),
              metadata: navigation.metadata,
            })),
            pathname: window.location.pathname,
          }),
        });
      } catch (error) {
        if (onError) {
          onError(error);

async function sewingKitMiddleware(ctx: Context, next: () => Promise) {
    const assets = new Assets({
      assetPrefix,
      userAgent: ctx.get(Header.UserAgent),
      manifestPath,
    });

    setAssets(ctx, assets);

    await next();
  }

const {body} = ctx.request as any;
      if (!isClientMetricsBody(body)) {
        ctx.status = StatusCode.UnprocessableEntity;
        return;
      }

      const statsd = new StatsDClient({
        host: statsdHost,
        port: statsdPort,
        logger: statsLogger,
        snakeCase: true,
        prefix,
      });

      const userAgent = ctx.get(Header.UserAgent);
      const {connection, events, navigations} = body;

      const metrics: {
        name: string;
        value: any;
        tags: {[key: string]: string | undefined | null};
      }[] = [];

      const additionalTags = getAdditionalTags
        ? getAdditionalTags(body, userAgent)
        : {};

      const tags = {
        browserConnectionType: connection.effectiveType,
        ...additionalTags,
      };

export default function BaseUri({uri}: Props) {
  useCspDirective(CspDirective.BaseUri, uri);
  return null;
}

export default function BlockAllMixedContent({value = true}: Props) {
  useCspDirective(CspDirective.BlockAllMixedContent, value);
  return null;
}