CODEWITHSUNDEEP
reactjsgraphqlapollo
user817851
user817851

Reputation: 229

GraphQL/Apollo application with file download from server

I'm a little new to GraphQL and this question falls under "It cannot possibly be this hard. I have to be missing something."

I have a fairly standard GraphQL/Apollo/React application split into client and server. Everything is working well with the client making API calls and getting data back from the server. The client is even able to upload files to the server. However, I now need the server to stream back files saved on disk. That's it.

This is the "I have to be missing something" part. Everything I've seen in the docs and on Stackoverflow is some variation of pushing the file back from the server and through the GraphQL query as a base64-endocded string and then doing some very hacky stuff on the client, often involving a hidden href tag and a simulated click. To this I say, "What???"

Seriously. There are files on disk that the server knows how to find. The client needs to show a button to the user that they can click on to download the file. That's it. Every other framework in every other language has an easy way to do this. Can someone show me the incredibly simple thing that I'm missing here?

Thanks, Alex

Upvotes: 6

Views: 5293

Answers (1)

Daniel Rearden
Daniel Rearden

Reputation: 84697

What you're missing is that GraphQL really shouldn't be used for this purpose.

While GraphQL itself does not specify a specific format for serializing responses, the de facto format is JSON. And the only way to get the file inside a JSON response is if it's serialized as a string.

If you want to serve static content, you should set up Nginx, Apache or another web server that's been built with that in mind. Alternatively, if you're already using some existing web server library like Express, it most likely has tools for serving static content as well.

Just because you have a GraphQL endpoint does not necessarily mean it should be the only way your client communicates with your backend.

Upvotes: 2

Related Questions