所需类型“上传！”的变量“$picture”没有提供

Posted 2023-03-08

【中文标题】所需类型“上传！”的变量“$picture”没有提供

【英文标题】：Variable "$picture" of required type "Upload!" was not provided

【发布时间】：2021-03-13 13:42:26

【问题描述】：

我正在尝试使用 graphql 将带有 apollo-upload-client 的文件从 Next.js 应用程序上传到 Node.js 后端。

我的 Apollo 客户端配置

const createClient = (ctx: NextPageContext) =>
new ApolloClient(
  credentials: "include",
  headers: 
    cookie:
      (typeof window === "undefined"
        ? ctx?.req?.headers.cookie
        : undefined) || "",
  ,
  cache: new InMemoryCache(),
  link: createUploadLink(uri:'http://localhost:4000/graphql', credentials:"include")
);

我的 TypeORM 快速解析器

@Resolver()
export class ProfilePictureResolver 
  @Mutation(() => Boolean)
  async addProfilePicture(@Arg("picture", () => GraphQLUpload)
  
    createReadStream,
    filename
  : Upload): Promise<boolean> 
    return new Promise(async (resolve, reject) =>
      createReadStream()
        .pipe(createWriteStream(__dirname + `/../../../images/$filename`))
        .on("finish", () => resolve(true))
        .on("error", () => reject(false))
    );
  

页面

const Profile:React.FC<IProps> = () => 

  const user = useSelector(state => state.user);
  const [file, setFileToUpload] = useState(null);
  const [mutate, loading] = useMutation(UPLOAD_IMAGE_MUTATION);


   function onChange(
    target: 
      validity,
      files: [file],
    ,
  ) 
    if (validity.valid) mutate( variables:  picture: file  );
  

  const onSubmit = async (e) =>
    e.preventDefault();
    console.log(file)
    const response = await mutate(
          variables: picture: file
    );


  

    return (
        <Box mt=20 pl=30 pr=30>
          <Header>
            Edit Profile
          </Header>
          <input onChange=onChange type="file" placeholder="photo" />
          <button onClick=(e)=>onSubmit(e)>Submit</button>
        </Box>
      
    )
;

表单数据

------WebKitFormBoundary3bcoEmOQWM0eUhCG Content-Disposition: form-data;名称="操作"

"operationName":"addProfilePicture","variables":"picture":null,"query":"mutation addProfilePicture($picture: 上传！) \n addProfilePicture(picture: $图片)\n\n" ------WebKitFormBoundary3bcoEmOQWM0eUhCG Content-Disposition: form-data;名称="地图"

"1":["variables.picture"] ------WebKitFormBoundary3bcoEmOQWM0eUhCG Content-Disposition: form-data;名称=“1”； 文件名="73387406_149357266327075_4919835380817576193_n.jpg" 内容类型：image/jpeg

------WebKitFormBoundary3bcoEmOQWM0eUhCG--

在控制台中调用突变之前，我看到该文件存在。我做错了什么？

更新： 我在客户端修复了突变，更改了 picture:file 上的 file。 现在我有另一个错误：

变量“$picture”的值无效；上传值无效。

更新 2：

这是我的查询的样子，可能会有所帮助

js export const UPLOAD_IMAGE_MUTATION = gql` mutation addProfilePicture($picture: Upload!) addProfilePicture(picture: $picture) `;

解决方案

我认为我的 apollo 服务器解析器确实有问题

我已经更改了旧的解析器（见上文）：

 uploadFile: async (_,  file ) => 
      const  createReadStream, filename  = await file;

      await new Promise(res =>
        createReadStream()
          .pipe(createWriteStream(path.join(__dirname, "../images", filename)))
          .on("close", res)
      );

      files.push(filename);

      return true;
    ,

如您所见，我不再使用 graphql 上传，而且我已将客户端突变改回

mutate( variables: file

还有新的变异查询：

  mutation UploadFile($file: Upload!) 
    uploadFile(file: $file)
  

现在它就像一个魅力。结案。

【问题讨论】：

mutate 调用了两次？在onChange 中应该是setFileToUpload(file)？更新表单数据

是的，你是对的，我这样做是为了调试，跳过一步并立即开始上传。

still variables.file in FormData - 显示此突变的后端规范，所需的突变参数名称是什么 - file 或 picture ？

必需 - picture

...再次...更新 FormData .... BE/API 是否支持正确上传？

【参考方案1】：

如错误所示，您的操作包含一个名为$picture 的变量，但您没有提供这样的变量。调用mutate 时，您提供的唯一变量是一个名为$file 的变量。你应该这样做：

const response = await mutate(
  variables:  picture: file ,
);

【讨论】：

没错，我的错。但仍然无法正常工作。现在我明白了："Variable "$picture" got invalid value ; Upload value invalid."

【参考方案2】：

我认为我的 apollo 服务器解析器确实有问题

我已经从这个问题中更改了旧的解析器：

 uploadFile: async (_,  file ) => 
      const  createReadStream, filename  = await file;

      await new Promise(res =>
        createReadStream()
          .pipe(createWriteStream(path.join(__dirname, "../images", filename)))
          .on("close", res)
      );

      files.push(filename);

      return true;
    ,

如您所见，我不再使用 graphql 上传，而且我已将客户端突变改回

mutate( variables: file

还有新的变异查询：

  mutation UploadFile($file: Upload!) 
    uploadFile(file: $file)
  

现在它就像一个魅力。