change port of graphiql?

[deadcoder0904]

i want to change the port from http://localhost:4000/graphql to http://localhost:3000/api

couldn't find it in docs. how to change that?

the reason to change it is i don't have to explicitly remember even though it outputs the url in console.

[dotansimha]

Hi @deadcoder0904 ,
Which package of Yoga are you using? Do you use the raw HTTP server created by Yoga, or you integrate it with another HTTP layer?

Also, do you wish to change only GraphiQL port? or the entire Yoga server/listener port?

[deadcoder0904]

Which package of Yoga are you using?

@graphql-yoga/node@^2.9.2

Do you use the raw HTTP server created by Yoga, or you integrate it with another HTTP layer?

i think it's next-connect but posting code to confirm it:

api/index.ts

import { NextApiResponse } from 'next'
import { NextHandler } from 'next-connect'
import { createServer } from '@graphql-yoga/node'
import { useApolloServerErrors } from '@envelop/apollo-server-errors'
import { PrismaClient } from '@prisma/client'

import prisma from '@/server/db/prisma'
import { getRequestOrigin } from '@/server/get-request-origin'
import { schema } from '@/server/graphql/schema'
import handler from '@/server/api-route'
import { NextIronRequest, Admin } from '@/types/index'

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

export interface GraphQLContext {
	admin: Admin
	origin: string
	prisma: PrismaClient
}

const yoga = createServer({
	schema,
	context: async ({ req }): Promise<GraphQLContext> => ({
		admin: req.session.admin,
		origin: getRequestOrigin(req),
		prisma,
	}),
	plugins: [useApolloServerErrors()],
})

const isAdminMiddleware = (req: NextIronRequest, res: NextApiResponse, next: NextHandler) => {
	if (req.session.admin) {
		req.admin = {
			isLoggedIn: req.session.admin.isLoggedIn,
		}
	}
	return next()
}

yoga.start()

// const apolloHandler = async (req: NextIronRequest, res: NextApiResponse) => {
// 	await startServer
// 	console.log('/api')
// 	await apolloServer.createHandler({
// 		path: '/api',
// 	})(req, res)
// }

export default handler().use(isAdminMiddleware)

api-route.ts

import { NextApiResponse } from 'next'
import { error } from 'next/dist/build/output/log'
import nc from 'next-connect'
import { ironSession } from 'iron-session/express'

import { IRON_OPTIONS } from '@/utils/index'
import { NextIronRequest } from '@/types/index'

/**
 * Create an API route handler with next-connect and all the necessary middlewares
 *
 * @example
 * ```ts
 * export default handler().get((req, res) => { ... })
 * ```
 */
function handler() {
	return nc<NextIronRequest, NextApiResponse>({
		onError: (err, _, res) => {
			error(err)
			res.status(500).end(err.toString())
		},
	}).use(ironSession(IRON_OPTIONS))
}

export default handler

Also, do you wish to change only GraphiQL port? or the entire Yoga server/listener port?

only graphiql port. i don't want it on 4000. i want it on 3000 where my app is running. also, the path should be /api & not /graphql

bdw do i have to use yoga.start() like that or need to await it bcz tutorials show the await version sometimes?

[deadcoder0904]

so i did try a couple of different methods & none worked. i don't think graphql-yoga has a method that allows it yet. here's what i tried:

1. use port & endpoint in createServer()

const yoga = createServer({
	schema,
	context: async ({ req }): Promise<GraphQLContext> => ({
		admin: req.session.admin,
		origin: getRequestOrigin(req),
		prisma,
	}),
	plugins: [useApolloServerErrors()],
	port: 3000,
	endpoint: '/api',
})

2. use server.listen() in yoga.start().then()

yoga.start().then((server) => {
	console.log({ server })
	server.close()
	server.listen(3000, 'http://localhost:3000/api')
})

this is how it works when using apollo-server-micro:

const apolloHandler = async (req: NextIronRequest, res: NextApiResponse) => {
	await startServer
	await apolloServer.createHandler({
		path: '/api',
	})(req, res)
}

this also allows it to be on the same port 3000 instead of starting a new port 4000. lmk if there's a good solution to this?

[deadcoder0904]

found the answer. it was on the last line on migration but definitely not obvious.

just had to add .use('/api', yoga) to make it work on the same port:

const yoga = createServer({
	schema,
	context: async ({ req }): Promise<GraphQLContext> => ({
		admin: req.session.admin,
		origin: getRequestOrigin(req),
		prisma,
	}),
	plugins: [useApolloServerErrors()],
})

const isAdminMiddleware = (req: NextIronRequest, res: NextApiResponse, next: NextHandler) => {
	if (req.session.admin) {
		req.admin = req.session.admin
	}
	return next()
}

export default handler().use(isAdminMiddleware).use('/api', yoga)

[Urigo]

@deadcoder0904 is there something you recommend we change in the docs or in the API to make it easier?

[deadcoder0904]

@Urigo yes, it should specify a way to use it with next-connect!

bdw this method stopped working with the latest release i think. did you guys change anything?

[deadcoder0904]

@Urigo next-connect was the issue. not graphql-yoga. next-connect version ^0.12.2 works well & the latest version ^0.13.0 gave error so will post the new working code again :)

[deadcoder0904]

for next-connect@^0.13.0 & onwards, use .all instead of .use in the final call:

export default handler()
	.use(isAdminMiddleware)
	.all('/api', yoga, () => {
		console.log(`💡 🧘 Yoga - Running GraphQL Server at http://localhost:3000/api`)
	})

[Urigo]

@deadcoder0904 is there something we should update somewhere regarding this?

[deadcoder0904]

@Urigo there should be an additional integration guide with next-connect just like you have for express & then probably just use .all because obviously everyone will be installing dependencies after v0.13.0 when they do npm i next-connect but i don't know if you guys want to support next-connect even though it is decently popular with ~70k weekly downloads :)

[Urigo]

we would love to add a guide about it, would you be willing to help us creating one?

[deadcoder0904]

@Urigo currently busy but i'll let you know if i get time (which is probably less likely) so maybe just add a integration for next-connect in the sidebar & link it to here. that looks like 2 mins of work but at least gives a solution :)