@konkonam/nuxt-shopify/dist/runtime/utils/client.js

Easily integrate shopify with nuxt 3 and 4 🚀

import { createGraphQLClient } from "@shopify/graphql-client";
import { joinURL } from "ufo";
import { createConsola } from "consola";
import { version } from "../../../package.json";
export const createStoreDomain = (name) => `https://${name}.myshopify.com`;
export const createApiUrl = (storeDomain, apiVersion, apiPrefix) => joinURL(
  storeDomain,
  apiPrefix ? `${apiPrefix}/api` : "api",
  apiVersion,
  "graphql.json"
);
export const createClient = (config) => {
  const {
    storeDomain,
    apiUrl,
    apiVersion,
    headers,
    logger,
    retries
  } = config;
  if (!apiVersion) {
    throw new Error("Missing API version");
  }
  const getStoreUrl = (apiVersion2) => joinURL(
    storeDomain,
    "api",
    apiVersion2,
    "graphql.json"
  );
  const clientConfig = {
    storeDomain,
    apiUrl,
    apiVersion,
    headers: {
      "Content-Type": "application/json",
      "Accept": "application/json",
      "X-SDK-Variant": "nuxt-shopify",
      "X-SDK-Version": version,
      ...headers
    }
  };
  const graphqlClient = createGraphQLClient({
    url: apiUrl,
    headers: clientConfig.headers,
    retries,
    logger: logger ? createConsola(logger).withTag("shopify").trace : void 0
  });
  const getHeaders = (customHeaders) => ({ ...customHeaders ?? {}, ...headers });
  const getApiUrl = (propApiVersion) => propApiVersion ? getStoreUrl(propApiVersion) : apiUrl;
  const getGQLClientParams = (operation, options) => {
    const props = [operation];
    if (options && Object.keys(options).length > 0) {
      const {
        variables,
        apiVersion: apiVersion2,
        headers: headers2,
        retries: retries2,
        signal
      } = options;
      props.push({
        ...variables ? { variables } : {},
        ...headers2 ? { headers: getHeaders(headers2) } : {},
        ...apiVersion2 ? { url: getApiUrl(apiVersion2) } : {},
        ...retries2 ? { retries: retries2 } : {},
        ...signal ? { signal } : {}
      });
    }
    return props;
  };
  return {
    config: clientConfig,
    getHeaders,
    getApiUrl,
    fetch: (...props) => graphqlClient.fetch(...getGQLClientParams(...props)),
    request: (...props) => graphqlClient.request(...getGQLClientParams(...props)),
    requestStream: (...props) => graphqlClient.requestStream(...getGQLClientParams(...props))
  };
};