Yoga graphql with Hono

[lane711]

Hello, I am trying to setup yoga graphql with hono, but its throwing an error when I go to /graphql:

Trace: TypeError: Cannot read properties of undefined (reading 'endsWith')

import { createYoga, createSchema, Repeater } from "graphql-yoga";

export function setupGraphQl(app) {
  // app.all('/graphql', (c) => c.text('graph'))
  app.use("/graphql", graphql);

}

const graphql = createYoga({
  schema: createSchema({
...

my index.ts

import { Hono } from "hono";
import { setupGraphQl } from "./cms/graphql/graphql";
const app = new Hono();

setupGraphQl(app);

export default app;

full code:
https://github.com/lane711/yoga/blob/feature/hono2/src/cms/graphql/graphql.ts

[yusukebe]

Hi @lane711 !

Hono does not support GraphQL Yoga now. Use GraphQL Server Middleware instead.

EDIT:

GraphQL Yoga works on Hono! See below.

[n1ru4l]

@rafaell-lycan Are you interested in sending a PR that adds this to our documentation?

[rafaell-lycan]

Hallo @n1ru4l 👋

I don't see a problem contributing to Yoga if I get decent results and no problem during the conversion.

I've been using Yoga over Apollo since March at work, and honestly, we were surprised by a few things (slightly better performance included).

I might first deal with the migration and then if I can do something quick/easy that helps with the docs I will share something with the community for sure, including the possible performance difference when using Hono's middleware vs Yoga.

[isaaccruzitc]

Hello,

I was having trouble making the example work with the latest version of Hono (I make it work with 3.0.0) any ideas on how to make it work with Hono's latest version?

Thank you.

[Urigo]

@isaaccruzitc can you share an example of what is not working for you?

[kamalkech]

I just did some testing and this seems to work fine.

import { Hono } from 'hono'
import { createYoga, createSchema } from 'graphql-yoga'

const app = new Hono()

const yoga = createYoga({
  schema: createSchema({
    typeDefs: /* GraphQL */ `
      type Query {
        hello: String!
      }
    `,
    resolvers: {
      Query: {
        hello: () => 'Hello world!',
      },
    },
  }),
})

app.use('*', async (context) => {
  // @ts-ignore
  return yoga.handle(context.req, {})
})

async function main() {
  const res = await app.request('http://localhost/graphql', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      query: `{ hello }`,
    }),
  })

  console.log(res.status)

  console.log(await res.text())
}

main()

what about ws for subscriptions ?

[demosjarco]

@lane711 GraphQL Yoga works just fine even with bindings. Just create a route and feed the .fetch() from yoga as the response for the route

import { Hono } from "hono";
import { createYoga } from "graphql-yoga";

type Bindings = {
	NODE_ENV: string;
	LOGGING: string;
	// ENVs here
};

const app = new Hono<{ Bindings: Bindings }>();

app.on(["POST", "GET"], "/whatever_path_you_want/", async (c) =>
	createYoga<Bindings & ExecutionContext>({
		logging: c.env.LOGGING,
		// `NODE_ENV` is under `c.env`
		maskedErrors: c.env.NODE_ENV == "production",
		// Keep as / so you're using just the hono route
		graphqlEndpoint: "/",
		schema: // feed in your schema here normally
	}).fetch(c.req.raw, c.env, c.executionCtx),
	// Make sure it's `c.req.raw` not `c.req` since yoga expects regular `Request` object. Then proceed to pass in env and ctx
);

export default app;

FYI my answer is slightly tweaked for cloudflare workers, but the gist is the same.

[wenerme]

@demosjarco Hi, do you make yogo sse works with hono ?

curl will block and return once

curl -N -H "accept:text/event-stream" "http://127.0.0.1:8066/graphql?query=subscription%7Bticker%7Bmessage%7D%7D" -v
*   Trying 127.0.0.1:8066...
* Connected to 127.0.0.1 (127.0.0.1) port 8066
> GET /graphql?query=subscription%7Bticker%7Bmessage%7D%7D HTTP/1.1
> Host: 127.0.0.1:8066
> User-Agent: curl/8.4.0
> accept:text/event-stream
>
< HTTP/1.1 200 OK
< Content-Type: text/event-stream
< Connection: keep-alive
< Cache-Control: no-cache
< Content-Encoding: none
< content-type: text/plain; charset=UTF-8
< content-length: 620
< Date: Fri, 22 Mar 2024 07:41:48 GMT
<
:

event: next
data: {"data":{"ticker":{"message":"Tick 0"}}}

event: next
data: {"data":{"ticker":{"message":"Tick 1"}}}

event: next
data: {"data":{"ticker":{"message":"Tick 2"}}}

event: next
data: {"data":{"ticker":{"message":"Tick 3"}}}

event: next
data: {"data":{"ticker":{"message":"Tick 4"}}}

event: next
data: {"data":{"ticker":{"message":"Tick 5"}}}

event: next
data: {"data":{"ticker":{"message":"Tick 6"}}}

event: next
data: {"data":{"ticker":{"message":"Tick 7"}}}

event: next
data: {"data":{"ticker":{"message":"Tick 8"}}}

event: next
data: {"data":{"ticker":{"message":"Tick 9"}}}

event: complete

[demosjarco]

Make sure you have the SSE (needed for both defer and subscriptions) plugin installed and listed

import { useDeferStream } from '@graphql-yoga/plugin-defer-stream';
import { useGraphQLSSE } from '@graphql-yoga/plugin-graphql-sse';

...

app.on(validApiMethods, '/somePath/*', async (c) =>
	createYoga<Bindings & ExecutionContext>({
		...,
		graphqlEndpoint: '/somePath/graphql',
		graphiql: {
			...,
			subscriptionsProtocol: 'GRAPHQL_SSE',
		},
		plugins: [
			useDeferStream(),
			useGraphQLSSE({
				endpoint: '/somePath/graphql/stream',
			}),
		],
	})
)

This works for me for subscribe with both async function* () and new Repeater()

[wenerme]

Use same path for stream will cause graphiql unsuable. But use different endpoint for stream will cause graphiql subscription hang.

Workaround

app.on(['POST', 'GET'], '/graphql/*', requestContext, withAuth, async (c) => {
      let req = c.req.raw;
      if (c.req.header('accept')?.includes('text/event-stream')) {
        if (c.req.path === '/graphql' || c.req.path === '/graphql/') {
          // use /graphql/stream
          req = new Request(req.url.replace('/graphql', '/graphql/stream'), req);
        }
      }

      // for non-node
      // return yoga.fetch(c.req.raw, c.env, c.executionCtx);

      return yoga.fetch(req, c.env);
    });

---

Wow, thanks, works now, using same path for graphqlEndpoint and stream, will this cause some problem ?

useGraphQLSSE({
   endpoint: '/somePath/graphql',
}),

[demosjarco]

Yeah, in my example, the graphql endpoint is 1 path segment more than the hono route it's on. Then stream is 1 path segment more than that.

[devmetal]

Hi, i'm just trying the yoga with hono and based on this topic and the documentation i came up a basic solution (no sse). I'm here to request some advice. This is a good way to integrate yoga or i'm in a very wrong direction?

import { createSchema, createYoga } from "graphql-yoga";
import { createMiddleware } from "hono/factory";

const yoga = createYoga({
  schema: createSchema({
    typeDefs: /* GraphQL */ `
      type Query {
        greetings: String
      }
    `,
    resolvers: {
      Query: {
        greetings: () => "Hello from Yoga in a Bun app!",
      },
    },
  }),
});

export const withYoga = createMiddleware(async (c, next) => {
  const response = await yoga.fetch(
    c.req.url,
    {
      method: c.req.method,
      headers: c.req.header(),
      body: c.req.raw.body,
    },
    c
  );

  const headersObj = Object.fromEntries(response.headers.entries());

  return c.body(response.body, {
    status: response.status,
    headers: headersObj,
  });
});

// app.js
app.use("/graphql", withYoga);

The code is working. I can send requests with graphiql and looks fine, but i'm courious of your opinion about it.

Thanks!

[kyscott18]

I'm pretty sure this code snippet is causing a memory leak. From what I can tell, c.req.raw.body is never being garbage collected.

[kamalkech]

i would like to see how is your last version using websocket for subscriptions

[wenerme]

This is mine, add support for SSE subscription

app.on(
      ['POST', 'GET', 'OPTIONS'],
      '/graphql/*',
      cors({
        origin: '*',
        allowMethods: ['POST', 'GET', 'OPTIONS'],
        allowHeaders: ['content-type', 'authorization'],
        credentials: true,
      }),
      requestContext,
      withAuth,
      async (c) => {
        let req = c.req.raw;
        let accept = c.req.header('accept');
        // use /graphql/stream for subscription
        if (accept && !accept.includes('application/json') && accept.includes('text/event-stream')) {
          if (c.req.path === '/graphql' || c.req.path === '/graphql/') {
            req = new Request(req.url.replace('/graphql', '/graphql/stream'), req);
          }
        }

        // for non-node
        // return yoga.fetch(c.req.raw, c.env, c.executionCtx);

        return yoga.fetch(req, c.env);
      },
    );

[wenerme]

Yes, just works

[obedm503]

@wenerme you can simplify it some more by not hardcoding /graphql/*

app.on(
      ['POST', 'GET', 'OPTIONS'],
      '/graphql/*',
      cors({
        origin: '*',
        allowMethods: ['POST', 'GET', 'OPTIONS'],
        allowHeaders: ['content-type', 'authorization'],
        credentials: true,
      }),
      requestContext,
      withAuth,
      async (c) => {
        let req = c.req.raw;
        let accept = c.req.header('accept');
        // use /graphql/stream for subscription
        if (accept && !accept.includes('application/json') && accept.includes('text/event-stream')) {

          // HERE
          const url = new URL(c.req.url);
          // replace the pathname with the endpoint yoga wants to use
          url.pathname = yoga.graphqlEndpoint;
          req = new Request(url), req);
          // /HERE
        }

        // for non-node
        // return yoga.fetch(c.req.raw, c.env, c.executionCtx);

        return yoga.fetch(req, c.env);
      },
    );

[wenerme]

@obedm503 I don't think the code is the same, I use this middleware now for yoga

function serveYoga({
  yoga,
  sseEndpoint,
}: {
  yoga: YogaServerInstance<any, any>;
  sseEndpoint?: string;
}): MiddlewareHandler {
  return async (c, next) => {
    if (c.finalized) {
      return next();
    }
    let req = c.req.raw;

    if (sseEndpoint) {
      let accept = req.headers.get('accept');
      if (accept && !accept.includes('application/json') && accept.includes('text/event-stream')) {
        let u = new URL(req.url);
        if (u.pathname.startsWith(sseEndpoint)) {
          u.pathname = sseEndpoint;
          req = new Request(u, req);
        }
      }
    }

    // for non-node
    // return yoga.fetch(c.req.raw, c.env, c.executionCtx);

    return yoga.fetch(req, c.env);
  };
}

[chrisnurse]

Any chance you (or anybody) can provide a complete example, combining hono, deno and yoga please?

[wenerme]

The middleware https://github.com/wenerme/wode/blob/e1f28caa877c00b409e4ff12242bfb3f2c32cdb8/apps/server/src/server/yoga/serveYoga.ts

The full code

https://github.com/wenerme/wode/blob/e1f28caa877c00b409e4ff12242bfb3f2c32cdb8/apps/server/src/apps/wode-api-server/runServer.ts#L71-L87

I use this in my real project, and serve a local graphiql.html in public like this
https://github.com/wenerme/wode/tree/main/apps/server/public

[kamalkech]

@devmetal can u share ur better last version of integrate yoga with hono and enable ws for subscription ??