Comments (32)
@bmullan91 working on it.
The code is now a bit of a mess, and for debugging purposes I've copied files from grapqhl-upload package what needs to be imported (as dependencies should work lmao)
from mercurius.
from mercurius.
@artecoop I've pushed up that sandbox into an actual repo: https://github.com/bmullan91/fastify-gql-upload-eg
from mercurius.
@artecoop https://www.npmjs.com/package/fastify-gql-upload - still need to write tests etc, but this should unblock you 😄
from mercurius.
Brilliant work @PabloSzx !!!
from mercurius.
Maybe we can link the plugin from this project README as well?
from mercurius.
You should be able to access that in your resolver as context.reply.request.body
.
from mercurius.
Ciao Matteo,
thanks for your reply.
The problem is the request never hit the resolver. the error
Must provide Source. Received: undefined
happens earlier in the fastify pipeline.
from mercurius.
Well, I did it.
Thanks to the debugger and the ability to step upward during debug, I understood my mistakes.
Body was not compliant with fastifyGraphQl
function in order to be parsed correctly.
I'll do some refinements now and then I'd love to share my work with you.
@mcollina Do you prefer that I send the code to you or I publish the plug in on my own?
from mercurius.
@artecoop Nice one! Do you have a branch somewhere where I can look? I'm also digging into this issue :)
from mercurius.
Yeah sorry for that!
from mercurius.
@artecoop After a lot of head scratching and try and error... I got it working with this before registering the fastify-gql
plugin:
fastify.addContentTypeParser("multipart", (req, done) => {
req.isMultipart = true;
done();
});
fastify.addHook("preValidation", async function(request, reply) {
if (!request.req.isMultipart) {
return;
}
// processRequest from `graphql-upload`
request.body = await processRequest(request.req, reply.res, options);
});
Here's a codesandbox with the code https://codesandbox.io/s/fastify-gql-upload-eg-7gsz9 - note It fails to write the file on sandbox, not sure if that's possible on codesandbox.
When I moved the code into a separate plugin it no longer worked - not sure why tbh 😕
from mercurius.
@bmullan91 how could this work? graphql-upload's processRequest uses, for example, request.once
and response.once
that aren't available in fastify's request/response.
I'm prepping a repo with my code to share with all of you.
from mercurius.
@artecoop Im passing the raw req, and resp via:
await processRequest(request.req, reply.res, options);
from mercurius.
@bmullan91 this is beatiful. Please publish it as npm package. It's way better than my implementation that rewrite the body.
from mercurius.
@artecoop Will do, once I figure out why fastify doesn't like it when I put it inside its own plugin 😅
from mercurius.
@bmullan91 check this out:
https://github.com/kennyrulez/fastify-gql-plugin
this is my implementation, maybe will help you
from mercurius.
Thank you, it works like a charm
from mercurius.
Made a fork of fastify-gql-upload
with updated syntax for Fastify v3, updated dependencies + TypeScript support.
https://www.npmjs.com/package/fastify-gql-upload-ts
https://github.com/PabloSzx/fastify-gql-upload-ts
from mercurius.
Could this be something that should be documented in the README, with a reference to @PabloSzx npm package?
Once documented & accessible to everyone, we should be able to close this, I believe.
from mercurius.
Should we support this natively?
from mercurius.
Apollo Server has out of the box support for File Uploads using graphql-upload, I think it would be nice to support it too, and it's not much code needed anyways, but there are some gotchas, like node version compatibility.
from mercurius.
Should we support this natively?
IMHO, no. Keep going with the single responsibility principle, and let other packages, yours or made by other developers, plugs extra features.
Dont waste the "pluggable" effort you did with fastify
from mercurius.
Should we support this natively?
Might be a good idea to do a quick Pro/Con list (please complete it, if I miss something important)
Pro
- Be compatible with
apollo-server
, which supports this out of the box (https://www.apollographql.com/docs/apollo-server/data/file-uploads/) - Necessary changes are minimal, judging from https://github.com/PabloSzx/fastify-gql-upload-ts/blob/master/index.ts
Neutral
- Might have a (minimal) performance impact due to the fact that each request needs to pass an async
preValidation
hook, which could be mitigated using a config option to disable the feature in case it's not needed: https://github.com/PabloSzx/fastify-gql-upload-ts/blob/master/index.ts#L22
Con
- Additional 3rd party dependency
graphql-upload
, which itself has 5 more first level dependencies adding quite a bit of weight - As per @artecoop definition, it violates the single responsibility principle (I'm personally undecided on this fact)
- Has been/Can be solved by a 3rd party module already
My subjective opinion, leave it out of core, but a note should be added to the README
with a link to the npm module by @PabloSzx & a quick integration/usage example.
from mercurius.
My vote goes to not adding it in the core and leaving it as a plugin (and yes, I'm new to fastify-gql and my 2 cents probably isn't worth much). 😊
Thing is, how one handles uploading files with a GraphQL server can differ depending on needs and nailing down one way into the core is sub-optimal for everyone else not needing that method. The upload feature is then just bloat. Using plugins means a developer makes the conscious decision to add that feature, and at that point it isn't bloat.
Scott
from mercurius.
closing, I think we have some sort of conclusion :).
from mercurius.
btw, the package was renamed to mercurius-upload following the rebranding
https://github.com/PabloSzx/mercurius-upload
https://www.npmjs.com/package/mercurius-upload
from mercurius.
@PabloSzx would you like to move it inside the org to give it an official blessing?
from mercurius.
@PabloSzx would you like to move it inside the org to give it an official blessing?
Sure 😁 I added you (matteo.collina) as a mantainer in the npm package, but when I try to "Transfer ownership" of the GitHub repository, this error comes up:
I just added you as a collaborator of I transferred the repo to you and maybe then you can transfer it to the org 👌 .
from mercurius.
Could you add me as an owner on npm as well? I am https://www.npmjs.com/~matteo.collina
from mercurius.
Could you add me as an owner on npm as well? I am https://www.npmjs.com/~matteo.collina
Done 👌
from mercurius.
Great!!!!
from mercurius.
Related Issues (20)
- Playground endpoint is not dynamic HOT 2
- Simple subscription example shown in docs fails to push new notifications to client HOT 3
- Occasional "error.originalError.errors.map is not a function" errors HOT 2
- Subscriber.js: Listener not removed on multiple topics
- GraphiQL issues in newest release HOT 2
- Types issue with Typescript module resolution node16 HOT 5
- local graphiql front-end sources for offline development HOT 1
- Implement Relay style pagination HOT 7
- How to disable `/graphql` route? HOT 1
- Multiple endpoints graphql using Fastify and Mercurius trigger error ' The decorator 'graphql' has already been added! ' HOT 1
- Case for a new hook HOT 2
- Community HOT 1
- Timing problems with nested resolvers throwing errors HOT 1
- Suggestion to approach Rate Limiting?
- DOC: docs don't have a favicon HOT 3
- Better error messages on passing array of executable schemas. HOT 3
- Support custom directives in mercurius core
- Create a tool kit for schema transformations HOT 1
- Several unit tests checking for errors would pass even if the error isn't thrown HOT 2
- Query caching broken with some custom scalars and JIT HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mercurius.