How to Upload a File to Apollo Server in React

Learn how to upload a file in GraphQL to Apollo Server using React.

----

----

----

----
Follow Me Online Here:

#benawad
​
----
#benawad

[RandomLifter]

Yo Ben, you saved my life with this upload. Couldn't find any working examples with hooks, apollo-client-upload, and react-dropzone before this. tyty.

[techstacker]

Very useful, thanks, Ben! Would love more videos about React + Apollo, and especially Next.js + Apollo, I'm so high on that combo atm 🙂

[MiguelVazquez]

Thank you so much, this helped so much. I was stuck for a bit.
apollo client and graphene django

[ericvondike]

This approach works fine if you have just one link to upload files, which is not at all the case in real applications. In any real application you have a very complex logic in which generally many different graphql servers are used in client side. I cold not find how to make composite link that uses some multiple links in the client side, something like ApolloLink.split() which can be used for HttpLink(s) to choose the client based on the clientName provided on the context.
In my application I have at least two different servers, one which manages the data and one which will manage files on another server. So I would need to use two different graphql servers on my client side. How I can manage to do that? Thanks for any help.

[andrewdenike]

is it recommended to use Express in this case? is there anyway of applying /images directory access with just Apollo Server/Graphql/React ?

[marlucz-dev]

Nice tutorial! Will this code work after changing ports from localhost to according ports from heroku/netlify?

[tomaszc]

I used code from given repository - but in my case it doesn't work properly. uploadFile mutation only create new file with given filename - but the file size is 0 bytes (as I wrote before - it is exactly the same code as in the given repository). Any hints how to solve this or how to check what is wrong ?

[Pyraptor]

Btw I had i problem running the project using npm because the client side required graphql but for some reason couldn't find it but i solved it by installing graphql on the client side

[SeanStoneburner]

If you receive an error of "RangeError: Maximum call stack size exceeded", add to package.json (in the server directory)

"resolutions": {
"fs-capacitor": "5.0.0"
},
"scripts": {
"preinstall": "npx npm-force-resolutions"
}

then npm install

[andrewdenike]

I noticed the line 39 of is existsSync(path.join(__dirname, "../images")) || mkdirSync(path.join(__dirname, "../images")); I am omitting it and it seems to function the same as before, is this necessary and if so, what is its function ?

[ronifintech]

Hi Ben, Thanks again! would you be able to create a similar video but with uploading to AWS S3?

[matfork]

Nice video Ben, One question, how do you handle max size for files or how many files can a user upload per request?

Apollo server has one config property named ‘uploads’ where you set those restrictions globally. But how can those restrictions be handled for a particular one particular mutation in an specific resolver without afecting others globally. I didnt find any information about that.

[Pyraptor]

I have a question, when building an app e.g. about images, what would be the difference between storing them in the file system instead of a database? I'm thinking specifically if for example I wanted to create a query to get all images of a certain year, if the pictures are in the file system it wouldn't be very practical

[benogidan]

Sorry Ben 2 :P but how is this different from your previous video on the subject? Just curious...Keep up the good work

[yazer]

When i remove the createUploadLink and use a link directly, it still uploads the file... how?? :)
Does apollo now have this built in? or how is that possible?

[vishnuprabuselvaraj]

Field \"uploadFile\" of type \"File\" must have a selection of subfields. Did you mean \"uploadFile { ... }\"?",
i check code but i got in this error,

[sujeet]

if you're getting error: "RangeError: Maximum call stack size exceeded".
apollo-server 2 is using older version of graphql-upload hence we get that error.