implement upload form functions

Signed-off-by: Chloe <pinkcloudvnn@gmail.com>

lib/shopify/index.ts

@@ -25,6 +25,7 @@ import {
   removeFromCartMutation,
   setCartAttributesMutation
 } from './mutations/cart';
+import { createFileMutation, createStageUploads } from './mutations/file';
 import { getCartQuery } from './queries/cart';
 import {
   getCollectionProductsQuery,
@@ -50,6 +51,7 @@ import {
   Collection,
   Connection,
   Customer,
+  FileCreateInput,
   Filter,
   Fulfillment,
   Image,
@@ -71,6 +73,7 @@ import {
   ShopifyCollectionProductsOperation,
   ShopifyCollectionsOperation,
   ShopifyCreateCartOperation,
+  ShopifyCreateFileOperation,
   ShopifyCustomer,
   ShopifyCustomerOperation,
   ShopifyCustomerOrderOperation,
@@ -92,9 +95,11 @@ import {
   ShopifyProductsOperation,
   ShopifyRemoveFromCartOperation,
   ShopifySetCartAttributesOperation,
+  ShopifyStagedUploadOperation,
   ShopifyUpdateCartOperation,
   Transaction,
-  TransmissionType
+  TransmissionType,
+  UploadInput
 } from './types';
 
 const domain = process.env.SHOPIFY_STORE_DOMAIN
@@ -1044,3 +1049,28 @@ export const getImage = async (id: string): Promise<Image> => {
 
   return res.body.data.node.image;
 };
+
+export const stageUploadFile = async (params: UploadInput) => {
+  const res = await adminFetch<ShopifyStagedUploadOperation>({
+    query: createStageUploads,
+    variables: { input: [params] }
+  });
+
+  return res.body.data.stagedUploadsCreate.stagedTargets;
+};
+
+export const uploadFile = async ({ url, formData }: { url: string; formData: FormData }) => {
+  return await fetch(url, {
+    method: 'POST',
+    body: formData
+  });
+};
+
+export const createFile = async (params: FileCreateInput) => {
+  const res = await adminFetch<ShopifyCreateFileOperation>({
+    query: createFileMutation,
+    variables: { files: [params] }
+  });
+
+  return res.body.data;
+};

lib/shopify/mutations/file.ts

@@ -0,0 +1,31 @@
+export const createStageUploads = /* GraphQL */ `
+  mutation stagedUploadsCreate($input: [StagedUploadInput!]!) {
+    stagedUploadsCreate(input: $input) {
+      stagedTargets {
+        url
+        resourceUrl
+        parameters {
+          name
+          value
+        }
+      }
+    }
+  }
+`;
+
+export const createFileMutation = /* GraphQL */ `
+  mutation fileCreate($files: [FileCreateInput!]!) {
+    fileCreate(files: $files) {
+      files {
+        fileStatus
+        ... on MediaImage {
+          id
+        }
+      }
+      userErrors {
+        field
+        message
+      }
+    }
+  }
+`;

lib/shopify/types.ts

@@ -783,3 +783,45 @@ export type CartAttributeInput = {
   key: string;
   value: string;
 };
+
+export type UploadInput = {
+  filename: string;
+  mimeType: string;
+  httpMethod: 'POST' | 'PUT';
+  fileSize: string;
+  resource: 'FILE' | 'IMAGE';
+};
+
+export type StagedUploadsCreatePayload = {
+  parameters: {
+    name: string;
+    value: string;
+  }[];
+  resourceUrl: string;
+  url: string;
+};
+
+export type ShopifyStagedUploadOperation = {
+  data: {
+    stagedUploadsCreate: {
+      stagedTargets: StagedUploadsCreatePayload[];
+    };
+  };
+  variables: { input: UploadInput[] };
+};
+
+export type FileCreateInput = {
+  alt: string;
+  contentType: 'FILE' | 'IMAGE';
+  originalSource: string;
+};
+
+export type ShopifyCreateFileOperation = {
+  data: {
+    fileCreate: {
+      files: { fileStatus: string; id: string }[];
+      userErrors: { code: string; field: string; message: string }[];
+    };
+  };
+  variables: { files: FileCreateInput[] };
+};