Migrating apollo-server-express to #apollo/server or graphql-yoga - firebase

Question

apollo-server-express and apollo-server-cloud-functions are deprecated, which most tutorials online showing how to set up firebase CF with graphql rely on. I'm hoping someone can help me (and surely others), migrate things so they work with #apollo/server v4, or alternatively using another open source library, such as graphql-yoga.
To begin, here is how I had my server set up until recently:
import { ApolloServer } from "apollo-server-express";
import admin from "firebase-admin";
import express from "express";
import schema from "./schema";
import resolvers from "./resolvers";
import UsersAPI from "./datasources/users";
const serviceAccount = require("../../private/serviceAccount.json");
const databaseURL = "https://my-app.firebaseio.com";
const globalServerApp = admin.initializeApp(
{ credential: admin.credential.cert(serviceAccount), databaseURL },
"server"
);
const globalDataSources = {
usersAPI: new UsersAPI(globalServerApp)
};
const initServer = () => {
const app = express();
const server = new ApolloServer({
typeDefs: schema,
resolvers,
dataSources: () => {
return globalDataSources;
},
uploads: false,
introspection: true,
playground: true,
context: async ({ req }) => {
return {
request: req,
};
},
});
server.applyMiddleware({ app, path: "/", cors: true });
return app;
};
export default initServer;
In addition, I would have this for the users schema:
import { gql } from "apollo-server-express";
const UserSchema = gql`
scalar JSONObject
type Something {
customer: String
}
extend type Query {
doSomething(someIDs: [String]): [Something]
}
extend type Mutation {
completeRegistration(
uid: ID!
first_name: String
last_name: String
invited_by: JSONObject
): Boolean
}
`;
export default UserSchema;
How would you write these using #apollo/server v4, graphql-yoga or maybe another simple way?

Answer 1

The primary differences between the version of apollo-server-express you're using and #apollo/server v4 are:
Package name changes, obviously.
Server implementations have been removed. This was done so that implementations could be community-owned, rather than them having to learn each new thing. Lucky for you express middleware is still in the main package, but now you can use the expressMiddleware wrapper function instead of applyMiddleware.
Playground was deprecated and removed in favor of Apollo's own "Apollo Sandbox". If you prefer GraphQL Playground, there's a plugin that needs to be installed called #apollo/server-plugin-landing-page-graphql-playground. The code below assumes you've installed that.
context became an implementation-specific function, so is no longer on the ApolloServer config. It's now on the expressMiddleware function.
DataSources are no longer in the root config. The return of the context function should now include dataSources if you want them. This should generally be a bit more straightforward.
With all of that put together (though, admittedly, without me having your code, so I can't actually test this thing running), this is what I would expect to work for you:
// These are the new packages
import { ApolloServer } from '#apollo/server';
import { expressMiddleware } from '#apollo/server/express4';
import { ApolloServerPluginLandingPageGraphQLPlayground } from '#apollo/server-plugin-landing-page-graphql-playground';
import admin from 'firebase-admin';
import express from 'express';
import schema from './schema';
import resolvers from './resolvers';
import UsersAPI from './datasources/users';
const serviceAccount = require('../../private/serviceAccount.json');
const databaseURL = 'https://my-app.firebaseio.com';
const globalServerApp = admin.initializeApp({ credential: admin.credential.cert(serviceAccount), databaseURL }, 'server');
const globalDataSources = {
usersAPI: new UsersAPI(globalServerApp),
};
const initServer = () => {
const app = express();
const server = new ApolloServer({
typeDefs: schema,
resolvers,
introspection: true,
plugins: [ApolloServerPluginLandingPageGraphQLPlayground()],
});
app.use(
'/',
expressMiddleware(server, {
context: async ({ req }) => {
return {
request: req,
dataSources: globalDataSources,
};
},
}),
);
return app;
};
export default initServer;