graphql/yoga-server/docs/integrations/integration-with-express

[giscus[bot]]

graphql/yoga-server/docs/integrations/integration-with-express

GraphQL Yoga Documentation

https://the-guild.dev/graphql/yoga-server/docs/integrations/integration-with-express

[groomzysa]

When deployed to production with nginx, graphiql is not working. Any reason why?

[n1ru4l]

Could you provide more information? This seems more like an nginx configuration problem than an issue with Yoga.

[skittlesaur]

Is there a way to use express' res.cookie with yoga?

The CookieStore used in https://the-guild.dev/graphql/yoga-server/docs/features/cookies doesn't seem to be supported in Firefox and Safari.

[ardatan]

I don't think this is related to the type of the browser. The CookieStore implementation we have just implements the same spec on the server side. It has nothing to do with the browser's support of CookieStore. It is an interface to manipulate cookie headers easily on the server code.
Also res.cookie is available in the context, but i don't think you need that.

[skittlesaur]

Oh that sounds good! the docs were unclear about this bit.

Thank you for the response ♡

[Urigo]

@skittlesaur can you maybe send a PR to our docs to make them clearer also for others?
Thank you!

[darkship]

We implemented the "Isolate GraphiQL configuration" example with express 5. It works but typescript isn't happy with yogaRouter.use(yoga);

TS2769: No overload matches this call.
The last overload gave the following error.
Argument of type YogaServerInstance<Context, ClientContext> is not assignable to parameter of type PathParams

Besides ignoring the error, this works too:
yogaRouter.use((req, res) => yoga(req, res));

[ardatan]

We don't have any typing errors in our Express example in this repo.
https://github.com/graphql-hive/graphql-yoga/tree/main/examples/express
Could you help us reproducing it please? Thanks!

[darkship]

This is the type from the example:
const graphQLServer: YogaServerInstance<{}, {}>

This is my type:

const graphQLServer = createYoga<{
      req: IncomingMessage;
      res: ServerResponse;
  }>({
      schema: createSchema({
      typeDefs: /* GraphQL */ `
        type Query {
          hello: String
        }
      `,
      resolvers: {
        Query: {
          hello: () => 'world',
        },
      },
    }),
    context: (initialContext)=>{
      const  {res, req, params} = initialContext;
      //do something with req/res/params
      return context;
    },
    logging: false,
  });

So as long as I have req and res, it breaks. But I need it and req and res are instances of IncomingMessage and ServerResponse

[darkship]

Note: even if we set { req: express.Request; res: express.Response; } typescript is complaining

[EmrysMyrddin]

I think that the typing problem comes from the fact that express.use callback does actually take more than just 2 arguments.

Yoga takes can also take a third argument, which will be used as a base for the initialContext. This is why manually creating a closure makes it working: it enforces that only the 2 first parameters are forwarded to Yoga handler.

For the why it works in the example and not in yours: In the example the context is of type {}, which in TS actually means "any non-null/undefined value", so whatever the third argument type is, TS is happy with it. In your case, you're narrowing down the accepted values for the third argument, making it incompatible with Express third argument.

Your fix using the closure is probably the best workaround :-) It makes your intention clear!