我正在尝试通过 apollo 客户端将图像上传到 keystone js,但它有一些错误

问题描述 投票:0回答:0

安装所有必要的包。 对于后端,我使用 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--
apollo-client keystonejs apollo-upload-client
© www.soinside.com 2019 - 2024. All rights reserved.