File Upload with GraphQL Yoga + Express + React

[nrathi]

Hi,

My setup is as follows:

GraphQL

  const setupGraphql = (services) => createYoga<{ res: ServerResponse }>({
    schema: createSchema<{ res: ServerResponse }>({
      typeDefs: schema.toString(),
      resolvers: graphqlResolvers,
    }),
    graphqlEndpoint: "/api/graphql",
    plugins: [useDisableIntrospection()],
    context: ({ res }): IResolverContext => {
      return {
        res,
        services,
      };
    },
  });

Express

  const graphql = setupGraphql(services);
  expressServer.use(graphql.graphqlEndpoint, (req, res) =>
    graphql.handleNodeRequest(req, { res }),
  );

I'm trying to make the following mutation work:

scalar File
type Mutation {
  UploadFile(file: File!): String!
}

I use it from my React component as follows:

  const [uploadFile] = useUploadFileMutation();
   uploadFile({ variables: { file } }); // Where file is of type "File"

The problem I'm facing is that the FE only sends the file path, and not the complete file. As a result, I'm unable to call file.arrayBuffer() in the resolver.

The CURL example in the docs uses a multi-part form:

curl localhost:4000/graphql \
  -F operations='{ "query": "mutation ($file: File!) { readTextFile(file: $file) }", "variables": { "file": null } }' \
  -F map='{ "0": ["variables.file"] }' \
  -F 0=@mytext.txt

Could you please provide a relevant React example as well? I've been stuck for a few hours.

Thank you!

[ardatan]

I don't think we need a React example. You can just use an example that uploads files with any GraphQL Client. There is nothing special for Yoga. Yoga implements the same spec.
If you have issues, please share a reproduction on CodeSandbox so we can help

[nrathi]

I ended up using apollo-upload-client and sticking with graphql-yoga/node, thank you!

[Urigo]

@nrathi can you share your example publicly?

[Urigo]

More examples are always better for people to look at