Я пытаюсь загрузить изображения через клиент apollo в keystone js, и у него есть некоторые ошибки.

Question

установлен весь необходимый пакет. для серверной части я использую Keystone js 3.79 для внешнего интерфейса GQL я использую клиент apollo, а для загрузки изображений я использую загрузку клиента apollo. здесь необходимая информация о моей проблеме.

CreateProduct.jsx

      import { useMutation } from "@apollo/client";
import gql from "graphql-tag";
import UseForm from "lib/UseForm"
import Form from "./styles/Form";
import DisplayError from "./ErrorMessage";
const CREATE_PRODUCT_MUTATION = gql`
    mutation createProductMutation(
        $name:String!
        $price:Int!
        $description:String 
        $image: Upload
    )
    {
        createProduct(
          data : {
          name : $name
          price : $price
          description :$description
          images:{
            create:{
                altText:$name
                image: $image
            }
          }
        }
        ){
            id
            name
            price
            description
        }
      }
    `;
export default function CreateProduct() {
    const { inputs, handelChange, cleanForm, resetForm } = UseForm();
    
    const [createProduct,{loading, error , data}] = useMutation(CREATE_PRODUCT_MUTATION,{
        variables:inputs
    })
    return (
        <>
            <Form onSubmit={async(e) =>{
                e.preventDefault()
                console.log(CREATE_PRODUCT_MUTATION)
                const res = await createProduct(inputs)
                console.log(res)
            } } >
                
                <fieldset disabled={loading} aria-busy={loading}>
                    <label htmlFor="image">
                        Image
                        <input type="file" name="image" id="image"
                        required
                            onChange={handelChange} />
                    </label>
                    <label htmlFor="name">
                        Name
                        <input type="text" name="name" id="name" placeholder="Product Name" value={inputs.name} onChange={handelChange} />
                    </label>
                    <label htmlFor="name">
                        Price
                        <input type="number" name="price" id="price" placeholder="Product Price" value={inputs.price} onChange={handelChange} />
                    </label>
                    <label htmlFor="name">
                        Description
                        <textarea name="description" id="description" placeholder="Product description"
                            value={inputs.description} onChange={handelChange} />
                    </label>
                    <input type="submit" value="+ Add" />

                    {/* <button type="button" onClick={cleanForm}>Clear Form</button>
                <button type="button" onClick={resetForm}>Rest Form</button> */}
                </fieldset>
            </Form>
        </>
    )
}

и ссылка на аполлон

      createUploadLink({
        uri: endpoint,
        fetchOptions: {
          credentials: 'include',
        },
        // pass the headers along from this request. This enables SSR with logged in state
        headers:{
          ...headers,
          "Apollo-Require-Preflight": "true",
        },
      }),

и ошибка

      [GraphQL error]: Message: Variable "$image" of type "Upload" used in position expecting type "ImageFieldInput"., Location: [object Object],[object Object], Path: undefined

я пробую все решения в Интернете, и проблема не решена. после некоторого поиска в Интернете я увидел эту полезную нагрузку gql

      ------WebKitFormBoundarymzArQNBwxW7U0G5D
Content-Disposition: form-data; name="operations"

{"operationName":"createProductMutation","variables":{"name":"shampo","price":1212,"description":"somtihng",**"image":null**},"query":"mutation createProductMutation($name: String!, $price: Int!, $description: String, $image: Upload) {\n  createProduct(\n    data: {name: $name, price: $price, description: $description, images: {create: {altText: $name, image: $image}}}\n  ) {\n    id\n    name\n    price\n    description\n    __typename\n  }\n}"}
------WebKitFormBoundarymzArQNBwxW7U0G5D
Content-Disposition: form-data; name="map"

{"1":["variables.image"]}
------WebKitFormBoundarymzArQNBwxW7U0G5D
Content-Disposition: form-data; name="1"; filename="1;dfadfa.jpg"
Content-Type: image/jpeg


------WebKitFormBoundarymzArQNBwxW7U0G5D--