基于ApolloGraphQL与ReScript实现文件上传：apollo-upload-client集成方案求助

我之前在ReScript + Apollo GraphQL的项目里实现过文件上传功能，刚好能给你一些具体的解决方案！下面是一步步的操作指南：

1. 安装依赖 #

首先确保你已经安装了apollo-upload-client：

npm install apollo-upload-client
# 或者用yarn
yarn add apollo-upload-client

2. 在ReScript中绑定createUploadLink #

因为ReScript的Apollo Client绑定没有内置createUploadLink，我们需要通过@module装饰器来绑定这个JS函数：

@module("apollo-upload-client")
external createUploadLink: (
  ~uri: string => string,
  ~headers: Js.Dict.t<string>=?,
  unit,
) => ApolloClient.Link.t = "createUploadLink"

这个绑定会让我们在ReScript代码里像调用原生函数一样使用createUploadLink，并且类型和Apollo的Link完全兼容。

3. 替换原有的HttpLink为UploadLink #

把你原来的httpLink替换成用createUploadLink创建的链接，它会自动处理文件上传所需的multipart/form-data请求头：

// 替换原来的httpLink定义
let uploadLink = createUploadLink(~uri=_ => Env.graphqlEndpoint, ())

// 保持其他client配置不变，只把link里的httpLink换成uploadLink
let client = {
  open ApolloClient
  make(
    ~cache=Cache.InMemoryCache.make(),
    ~connectToDevTools=true,
    ~defaultOptions=DefaultOptions.make(
      ~mutate=DefaultMutateOptions.make(~awaitRefetchQueries=true, ~errorPolicy=All, ()),
      ~query=DefaultQueryOptions.make(~fetchPolicy=NetworkOnly, ~errorPolicy=All, ()),
      ~watchQuery=DefaultWatchQueryOptions.make(~fetchPolicy=NetworkOnly, ~errorPolicy=All, ()),
      (),
    ),
    ~link=ApolloClient.Link.from([authTokenContextLink, uploadLink]),
    (),
  )
}

4. 编写文件上传的Mutation #

接下来你需要定义支持文件上传的GraphQL Mutation，注意变量类型要使用Upload：

module UploadFileMutation = %graphql(`
  mutation UploadFile($file: Upload!) {
    uploadFile(file: $file) {
      id
      url
    }
  }
`)

5. 调用Mutation上传文件 #

当你需要上传文件时，从文件输入框获取File对象，然后传入Mutation变量：

// 假设你有一个文件输入的ref
let fileInputRef = React.useRef(Js.Nullable.null)

let handleUpload = () => {
  switch fileInputRef.current->Js.Nullable.toOption {
  | Some(input) =>
    switch input.files->Js.Nullable.toOption {
    | Some(files) =>
      let file = files->Js.Array.get(0)
      UploadFileMutation.useMutation()->ApolloClient.Mutation.mutate(~variables={ "file": file }, ())
    | None => ()
    }
  | None => ()
  }
}

关键注意点 #

• createUploadLink会自动检测请求中是否包含文件，动态切换Content-Type为multipart/form-data，不需要手动设置
• 确保你的Apollo Server端也配置了文件上传支持（比如安装graphql-upload并启用对应的中间件），否则客户端上传会失败

内容的提问来源于stack exchange，提问作者Ihar