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

[giscus[bot]]

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

GraphQL Yoga provides you a cross-platform GraphQL Server. So you can easily integrate it into any platform besides Node.js.

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

[o-az]

How would I use websocket with Bun here? Since Bun comes with websockets built in, I tried setting it up but no luck.

https://bun.sh/docs/api/websockets

[ardatan]

Yoga has nothing to do with WS. Check GraphQL WS for that;
https://the-guild.dev/graphql/ws

[kamalkech]

That s schema first, so how make code first ?

[enri90]

is supported jsonwebtoken in bun?

https://the-guild.dev/graphql/yoga-server/docs/features/jwt

if (!secretOrPrivateKey && options.algorithm !== 'none') {
return failure(new Error('secretOrPrivateKey must have a value'));
}

if (secretOrPrivateKey != null && !(secretOrPrivateKey instanceof KeyObject)) {
try {
^
TypeError: Right hand side of instanceof is not an object
at /node_modules/jsonwebtoken/sign.js:115:8

[enri90]

at the moment it only works with jose
new jose.SignJWT({ payload })
.setProtectedHeader({ alg: 'HS256' })
.setExpirationTime(expiresIn)
.sign(secret)

[renhyl]

to anyone struggling with "subscription", here is the gist that helped me:
https://gist.github.com/ashbuilds/490d504d703a5ddfcdf504f6c21e220d

key points to note/implement are:

import { makeHandler } from "graphql-ws/lib/use/bun";

const websocketHandler = makeHandler({
schema,
execute: (args) => args.rootValue.execute(args),
subscribe: (args) => args.rootValue.subscribe(args),
onSubscribe: async (ctx, msg) => {
const {schema, execute, subscribe, contextFactory, parse, validate} = yogaApp.getEnveloped({
...ctx,
req: ctx.extra.request,
socket: ctx.extra.socket,
params: msg.payload
})

        const args = {
            schema,
            operationName: msg.payload.operationName,
            document: parse(msg.payload.query),
            variableValues: msg.payload.variables,
            contextValue: await contextFactory(),
            rootValue: {
                execute,
                subscribe
            }
        }

        const errors = validate(args.schema, args.document)
        if (errors.length) return errors

        return args
    },
})

const server = Bun.serve({ fetch: (request, server) => {
    // Upgrade the request to a WebSocket
    if (server.upgrade(request)) {
        return new Response()
    }

    return yogaApp.fetch(request, server)
}, port: 3000, websocket: websocketHandler })

[mdugue]

if you get the Typescript Issue Typescript type mismatch: Argument of type 'YogaServerInstance<{}, {}>' is not assignable to parameter of type 'Serve' using bun replace

const server = Bun.serve({
  fetch: yoga
})

with

const server = Bun.serve({
  fetch: (request) => yoga(request),
})

see #3003 (comment)

[yamcodes]

[email protected] is throwing a type error with [email protected] for this tutorial:

const server = Bun.serve({
  fetch: yoga,
});

Type 'YogaServerInstance<{}, {}>' is not assignable to type '((this: Server, request: Request, server: Server) => Response | Promise<Response>) | ((this: Server, request: Request, server: Server) => Response | Promise<...>) | ((this: Server, request: Request, server: Server) => void | ... 2 more ... | undefined) | ((this: Server, request: Request, server: Server) => Response ...'.
  Type 'YogaServerInstance<{}, {}>' is not assignable to type '(this: Server, request: Request, server: Server) => Response | Promise<Response>'.
    Types of parameters 'res' and 'server' are incompatible.
      Type 'Server' is not assignable to type 'NodeResponse'.ts(2322)
bun.d.ts(2436, 3): The expected type comes from property 'fetch' which is declared here on type 'Serve<unknown>'
(property) fetch: YogaServerInstance<{}, {}>

[yamcodes]

Fixing my own problem:

The error is fixed by using this instead:

const server = Bun.serve({
  fetch: (req) => yoga.fetch(req),
});

[yamcodes]

After seeing @mdugue's comment, I'm not sure if my solution is better or his. YMMV.
#2644 (comment)

[stevegoossens]

This worked for me, but the same thing can be written as:

const server = Bun.serve({
  fetch: yoga.fetch
})

[yamcodes]

Thanks @stevegoossens!

fetch: yoga.fetch is throwing an eslint@typescript-eslint/unbound-method error, and besides, the jsdoc is worrying me a bit:

WHATWG Fetch spec compliant fetch function that can be used for testing purposes.

It seems fetch: (request) => yoga(request) (as proposed by @DuckThom here: #3003 (comment)) is more reliable. I've made a PR to fix the guide.

[ardatan]

It is not a runtime or typechecking error but a linting error as you can see it comes from your ESLint configuration.
yoga.fetch can be used for testing but it doesn't mean you should not use it for actual impl.
On the other hand, fetch: yoga should be fixed in the typings we have instead of doing fetch: req => yoga(req)

[kyle-villeneuve]

This implementation works with bun and yoga v5

import { makeHandler } from 'graphql-ws/use/bun';
import { createYoga } from 'graphql-yoga';


const yogaApp = createYoga({ ... config here... })

  const bunServer = Bun.serve({
    port: PORT,
    hostname: '0.0.0.0',
    websocket: makeHandler<{ token: string }, { user: UserSession.DefaultTokenPayload }>({
      // extra is available here so we don't have to revalidate the JWT
      context: setWebhookContext,
      // return false or throw to prevent connection
      async onConnect({ connectionParams, extra }) {
        const token = connectionParams?.token;

        if (typeof token !== 'string') return false;

        try {
          extra.user = authenticateJWT(token);
          return true;
        } catch {
          return false;
        }
      },
      schema: executableSchema,
    }),
    async fetch(request, server) {
      const url = new URL(request.url);

      switch (url.pathname) {
        case '/health': {
          return new Response('OK', { status: 200 });
        }
        case '/subscriptions': {
          if (server.upgrade(request)) {
            return new Response('OK', { status: 200 });
          }
          return new Response('Unable to upgrade to websockets', { status: 400 });
        }
        case yogaApp.graphqlEndpoint: {
          return yogaApp.fetch(request, server);
        }
       ... etc
      }
    },
  });