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.

[rafaell-lycan]

@yusukebe @n1ru4l this tiny guide has helped me a lot as I'm moving from Express + GraphQL Yoga to Hono.

Can't say for sure regarding performance-wise compared with the Middleware, but I'm positive that I might just transit without any major issues. I'll let you guys know if I face anything weird.

Kudos to @n1ru4l for bringing it up quickly after the discussion was created. 🙏

Thanks a lot for it.

[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?

[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!

[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);
      },
    );

[devmetal]

Oh, so basically i can pass the whole raw request for yoga fetch and no necessary for extract the parts from it?

[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);
      },
    );