Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Jan Dvorak
Jan Dvorak

Posted on

     

Upgrading to Apollo 3 in Meteor in 3 steps

Apollo server 3 is out and in Meteor 2.4 the Apollo skeleton is going to be updated to it. But if you have an existing project with Apollo 2 in your Meteor app, you will have to spend a little bit of a time to get to the newest version.

Here I will cover the basic 3 steps to upgrade to Apollo 3 in your Meteor app. Do note that you will probably do a little bit more for your particular app as there are many changes. Don't forget to study theApollo migration guide.

1. Add Express to your dependencies

Express has becomepeer dependency for Apollo and Connect which comes bundled with Meteor is no longer enough, so you will need to add it for Apollo to run:

meteor npm i--save express
Enter fullscreen modeExit fullscreen mode

2. Update your Apollo starting script

You will have to re-visit your starting script as Apollo now requires toexplicitly call the start function. This will mean that you will have to re-structure a bit how to start the server with Apollo:

// apollo.jsimport{ApolloServer}from'apollo-server-express';import{WebApp}from'meteor/webapp';import{getUser}from'meteor/apollo';import{makeExecutableSchema}from'@graphql-tools/schema';constserver=newApolloServer({schema:makeExecutableSchema({typeDefs,resolvers,}),context:async({req})=>({user:awaitgetUser(req.headers.authorization)})})exportasyncfunctionstartApolloServer(){awaitserver.start();constapp=WebApp.connectHandlers;server.applyMiddleware({app,cors:true});}// main.jsimport{startApolloServer}from'./apollo';functioninsertLink({title,url}){LinksCollection.insert({title,url,createdAt:newDate()});}try{startApolloServer().then();}catch(e){console.error(e.reason);}
Enter fullscreen modeExit fullscreen mode

3. Update your resolvers and queries

Almost everything now is async in Apollo, so you will need to update your resolvers and queries withasync keyword before them like this:

constresolvers={Query:{getLink:async(obj,{id})=>LinksCollection.findOne(id),getLinks:async()=>LinksCollection.find().fetch()}};
Enter fullscreen modeExit fullscreen mode

And that should be it! That is if you have a very simple setup. Changes are that you will need to dive in, especially in updating your options for Apollo, so don't forget to check withthe Apollo Server changelog for all the details.


If you like my work, please support me onGitHub Sponsors ❤️.

Top comments(5)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
freeseamew profile image
freeseamew
  • Location
    Seoul, Korea
  • Education
    deajin
  • Work
    frontend programer
  • Joined

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',  });})();
Enter fullscreen modeExit fullscreen mode
CollapseExpand
 
freeseamew profile image
freeseamew
  • Location
    Seoul, Korea
  • Education
    deajin
  • Work
    frontend programer
  • Joined
• Edited on• Edited

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',  });})();
Enter fullscreen modeExit fullscreen mode
CollapseExpand
 
freeseamew profile image
freeseamew
  • Location
    Seoul, Korea
  • Education
    deajin
  • Work
    frontend programer
  • Joined

As far as I know, file upload has also changed in apollo server 3. Can I know how to upload the file of meteor with appollo server 3?

CollapseExpand
 
imhazige profile image
imhazige
  • Joined

I can not make the subscription work, could you provide the example.

Refer to this ticket.
github.com/meteor/meteor/issues/11926

CollapseExpand
 
storytellercz profile image
Jan Dvorak
Developer, organizer and sci-fi writer.
  • Email
  • Location
    Prague, EU
  • Education
    Rochester Institute of Technology
  • Work
    Full-stack developer at Literary Universe
  • Joined

GraphQL subscriptions are entirely different issue and indeed are not supported out of the box in Meteor. In Meteor though you can just use the native pub/sub implementation to get better results.
I would recommend this forum discussion on the topic of GraphQL subscriptions:forums.meteor.com/t/meteor-collect...

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Developer, organizer and sci-fi writer.
  • Location
    Prague, EU
  • Education
    Rochester Institute of Technology
  • Work
    Full-stack developer at Literary Universe
  • Joined

More fromJan Dvorak

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp