Does someone has a working example of a nextjs + graphql-mesh setup

[gablabelle]

I'd like to know if there is a way to use graphl-mesh via nextjs. We have a monorepo with a nextjs app.

It's end up being super slow. We have like 3 big swagger yaml files. If I run the graph-mesh as stand-alone, it works fine.

Here is what I've tried.

// next.js /api/graphql.ts
import { NextApiRequest, NextApiResponse } from 'next';
import { createApolloServer } from '@monorepo/web-graphql-server';

let apolloServerHandler: (
  req: NextApiRequest,
  res: NextApiResponse,
) => Promise<void>;

export const config = {
  api: {
    bodyParser: false,
  },
};

export default async (req: NextApiRequest, res: NextApiResponse) => {
  if (apolloServerHandler) return apolloServerHandler(req, res);
  const server = await createApolloServer();
  apolloServerHandler = server.createHandler({ path: '/api/graphql' });
  return apolloServerHandler(req, res);
};

// @monorepo/web-graphql-server
import path from 'path';
import { ApolloServer } from 'apollo-server-micro';
import { findAndParseConfig } from '@graphql-mesh/config';
// import { processConfig } from '@graphql-mesh/config';
import { getMesh } from '@graphql-mesh/runtime';
// import meshConfig from './meshConfig';
// import { dataSources } from './dataSources';

const isProd = process.env.NODE_ENV === 'production';
let apolloServer: ApolloServer;

export default async function createApolloServer() {
  if (apolloServer) return apolloServer;
  // const config = await processConfig(meshConfig, {
  //   dir: __dirname,
  // });
  const config = await findAndParseConfig({
    dir: path.join(__dirname, '../../..'),
  });
  const { schema, contextBuilder } = await getMesh(config);

  apolloServer = new ApolloServer({
    schema,
    introspection: !isProd,
    playground: !isProd,
    // dataSources,
    context: contextBuilder,
  });

  return apolloServer;
}

Using a typescript config file and processConfig file instead did the same (commented code).

Any suggestions are welcome. Thanks!

[Urigo]

Are you up to trying to put an example yourself?
You can start with a none working one and we could jump in and fix it together?

[gablabelle]

I'm going to test this possible solution where I save the server globally, outside of the route.

https://github.com/gablabelle/next-mesh-apollo-monorepo-example/tree/solution-1

[gablabelle]

I'm going to test this possible solution where I save the server globally, outside of the route.

https://github.com/gablabelle/next-mesh-apollo-monorepo-example/tree/solution-1

Solution is working fine for us, thanks.

[Urigo]

that's awesome! should we link to it in the docs or would you want to add it to the examples folder?

[gablabelle]

@Urigo Here you go #2069

[Urigo]

thank you so much @gablabelle !

[charlypoly]

Hi!

We now provide a dedicated guide on how to deploy Mesh: https://www.graphql-mesh.com/docs/getting-started/deploy-mesh-gateway

[gablabelle]

@charlypoly cool but unfortunately the nextjs-apollo-example is broken at the moment #3827

Would you have a potential workaround until this gets fixed?

[ardatan]

You can check what @charlypoly sent, it uses GraphQL Yoga instead (you can even copy/paste).
If you are building a full stack app, I'd recommend SDK approach;
https://github.com/Urigo/graphql-mesh/tree/master/examples/nextjs-sdk-example

[gablabelle]

@ardatan this looks super interesting but I simply wanted to upgrade our current BFF (backend for frontend) running nextjs + apollo + graphql-mesh and that we use in production for both our web and mobile apps.

Was looking for a working example since the @graphql-mesh/* libs API seem to have changed a lot since I've created the first nextjs-apollo-example for you guys a year ago.

[ardatan]

@gablabelle I see I don't know how it'll work with Apollo since it doesn't support Envelop completely but we have this Next.js setup with GraphQL Yoga for our Covid example which is working fine;
https://github.com/Urigo/graphql-mesh/blob/c6198b15be7908f3b9c839d1d5e05ecf1e4dbde4/website/src/pages/api/covid/index.ts
https://graphql-mesh.com/api/covid