how to Upload file from Metor with Apollo server 3.

Help
1

how to Upload file from Metor with Apollo server 3.

As far as I know, file upload has also changed in apollo server 3.
May I know how to set the next code in meter?

async function startServer() {
  const server = new ApolloServer({
    typeDefs,
    resolvers,
  });
  await server.start();

  const app = express();

  // This middleware should be added before calling `applyMiddleware`.
  app.use(graphqlUploadExpress());

  server.applyMiddleware({ app });

  await new Promise(r => app.listen({ port: 4000 }, r));

  console.log(`🚀 Server ready at http://localhost:4000${server.graphqlPath}`);
}
2

I setup meteor and apollo as follows.
But I don’t know how to set graphql-upload.
If you know how to setup graphql-upload in a meteor with apollo environment, please help.

 const server = new ApolloServer({
    playground: true,
    schema,
    plugins: [
      ...
    ],
    context: async({req}) => ({
      user: await getUser(req.headers.authorization) 
    })  
  });  

  await server.start();

  server.applyMiddleware({
    app: WebApp.connectHandlers,
    cors: true,
    path: '/graphql',
  });
3

Hey @freeseamew!

Not sure this helps, but I wrote this tutorial which goes over how to handle file uploads with Apollo Server 3:

It’s not specific to Meteor, but it should still help! Essentially, you’ll need to:

  • install the graphql-upload package which allows the graphql server to allow multipart request (instead of being restricted to just JSON)
  • the graphql-upload package also has a resolver you’ll use and pass this into the argument of the request.

Let me know if you have any questions!

4

I have set the graphql-upload in meteor+apollo based on the apollo document as follows.
However, the file is not being uploaded.
Can I know what the problem is?

...

(async function(){

...
  
  const server = new ApolloServer({
    playground: true,
    schema,
    plugins: [
      ...
    ],
    context: async({req}) => ({
      user: await getUser(req.headers.authorization) 
    }),
  });  

  await server.start();

  const app = WebApp.connectHandlers;

  WebApp.connectHandlers.use("/graphql", (req, res, next) => {
    graphqlUploadExpress();
    next();
  })

  server.applyMiddleware({
    app,
    cors: true,
    path: '/graphql',
  });

})();
5

The conclusion was solved by loading express as follows.

I hope it will help someone.

...

(async function(){

...

  const server = new ApolloServer({
    playground: true,
    schema,
    plugins: [
      ...
    ],
    context: async({req}) => ({
      user: await getUser(req.headers.authorization) ;
    }),
  });  

  await server.start();

  const app = express(); // This is important!
  app.use(graphqlUploadExpress()); // This is important!
  WebApp.connectHandlers.use('/graphql', app); // This is important!

  WebApp.connectHandlers.use("/graphql", (req, res, next) => {
    
    if (req.method === "GET") {
      console.log('Test!!!!!!');
      res.end()
    }    
    if(req.method ==="POST") {
      console.log('@@@@')
      console.log(`req: ${JSON.stringify(req.body) }`);
    }
    next();

  });
  server.applyMiddleware({
    app,
    cors: true,
    path: '/graphql',
  });

})();
1 Like
6

I’m getting an error stating that POST http://localhost:3000/graphql 405 (Method Not Allowed). Any ideas on what is happening here?

What are the changes that need to be made for ApolloClient?