Upgrading to Apollo 3 in Meteor in 3 steps

Publish Date: Aug 2 '21

6 5

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 the Apollo migration guide.

1. Add Express to your dependencies

Express has become peer 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

2. Update your Apollo starting script

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

// apollo.js
import { ApolloServer } from 'apollo-server-express';
import { WebApp } from 'meteor/webapp';
import { getUser } from 'meteor/apollo';
import { makeExecutableSchema } from '@graphql-tools/schema';

const server = new ApolloServer({
  schema: makeExecutableSchema({
    typeDefs,
    resolvers,
  }),
  context: async ({ req }) => ({
    user: await getUser(req.headers.authorization)
  })
})

export async function startApolloServer() {
  await server.start();
  const app = WebApp.connectHandlers;

  server.applyMiddleware({
    app,
    cors: true
  });
}

// main.js
import { startApolloServer } from './apollo';

function insertLink({ title, url }) {
  LinksCollection.insert({title, url, createdAt: new Date()});
}

try {
  startApolloServer().then();
} catch (e) {
  console.error(e.reason);
}

3. Update your resolvers and queries

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

const resolvers = {
  Query: {
    getLink: async (obj, { id }) => LinksCollection.findOne(id),
    getLinks: async () => LinksCollection.find().fetch()
  }
};

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 with the Apollo Server changelog for all the details.

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

Comments 5 total

freeseamewSep 16, 2021
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?

freeseamewSep 24, 2021

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',
  });

})();

freeseamewSep 28, 2021

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',
  });

})();

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

Refer to this ticket.
github.com/meteor/meteor/issues/11926
- Jan DvorakFeb 18, 2022
  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...

Add comment

Jan Dvorak @storytellercz