better endpoint binding in documentation

website/src/pages/docs/integrations/integration-with-deno.mdx

@@ -43,7 +43,9 @@ const yoga = createYoga({
 
 serve(yoga, {
   onListen({ hostname, port }) {
-    console.log(`Listening on http://${hostname}:${port}/graphql`)
+    console.log(
+      `Listening on http://${hostname}:${port}/${yoga.graphqlEndpoint}}`
+    )
   }
 })
 ```

website/src/pages/docs/integrations/integration-with-express.mdx

@@ -28,33 +28,12 @@ const app = express()
 
 const yoga = createYoga()
 
-// Bind GraphQL Yoga to `/graphql` endpoint
-app.use('/graphql', yoga)
+// Bind GraphQL Yoga to the graphql endpoint to avoid rendering the playground on any path
+app.use(yoga.graphqlEndpoint, yoga)
 
 app.listen(4000, () => {
   console.log('Running a GraphQL API server at http://localhost:4000/graphql')
 })
 ```
 
 > You can also check a full example on our GitHub repository [here](https://github.com/dotansimha/graphql-yoga/tree/v3/examples/express)
-
-## Custom endpoint
-
-By default, GraphQL Yoga will bind to the `/graphql` endpoint. You can change this behavior by passing a `graphqlEndpoint` option to the `createYoga` function.
-
-```ts
-import express from 'express'
-import { createYoga } from 'graphql-yoga'
-
-const app = express()
-
-const yoga = createYoga({
-  graphqlEndpoint: '/custom/endpoint'
-})
-
-app.use('/custom/endpoint', yoga)
-
-app.listen(4000, () => {
-  console.log('Running a GraphQL API server at http://localhost:4000/graphql')
-})
-```

website/src/pages/docs/integrations/integration-with-fastify.mdx

@@ -44,7 +44,8 @@ const yoga = createYoga<{
  * Learn more about `reply` https://www.fastify.io/docs/latest/Reply/
  **/
 app.route({
-  url: '/graphql',
+  // Bind to the Yoga's endpoint to avoid rendering on any path
+  url: yoga.graphqlEndpoint,
   method: ['GET', 'POST', 'OPTIONS'],
   handler: async (req, reply) => {
     // Second parameter adds Fastify's `req` and `reply` to the GraphQL Context
@@ -79,57 +80,3 @@ app.addContentTypeParser('multipart/form-data', {}, (req, payload, done) =>
 ```
 
 > You can also check a full example on our GitHub repository [here](https://github.com/dotansimha/graphql-yoga/tree/v3/examples/fastify)
-
-## Customize endpoint
-
-By default GraphQL Yoga will expose a `/graphql` endpoint. You can customize it by passing a `graphqlEndpoint` option to `createYoga`:
-
-```ts
-import { createYoga } from 'graphql-yoga'
-import fastify, { FastifyRequest, FastifyReply } from 'fastify'
-
-// This is the fastify instance you have created
-const app = fastify({ logger: true })
-
-const yoga = createYoga<{
-  req: FastifyRequest
-  reply: FastifyReply
-}>({
-  graphqlEndpoint: '/custom/endpoint',
-  // Integrate Fastify logger
-  logging: {
-    debug: (...args) => args.forEach((arg) => app.log.debug(arg)),
-    info: (...args) => args.forEach((arg) => app.log.info(arg)),
-    warn: (...args) => args.forEach((arg) => app.log.warn(arg)),
-    error: (...args) => args.forEach((arg) => app.log.error(arg))
-  }
-})
-
-/**
- * We pass the incoming HTTP request to GraphQL Yoga
- * and handle the response using Fastify's `reply` API
- * Learn more about `reply` https://www.fastify.io/docs/latest/Reply/
- **/
-app.route({
-  url: '/custom/endpoint',
-  method: ['GET', 'POST', 'OPTIONS'],
-  handler: async (req, reply) => {
-    // Second parameter adds Fastify's `req` and `reply` to the GraphQL Context
-    const response = await yoga.handleNodeRequest(req, {
-      req,
-      reply
-    })
-    response.headers.forEach((value, key) => {
-      reply.header(key, value)
-    })
-
-    reply.status(response.status)
-
-    reply.send(response.body)
-
-    return reply
-  }
-})
-
-app.listen(4000)
-```

website/src/pages/docs/integrations/integration-with-koa.mdx

@@ -41,7 +41,9 @@ app.use(async (ctx) => {
 })
 
 app.listen(4000, () => {
-  console.log('Running a GraphQL API server at http://localhost:4000')
+  console.log(
+    `Running a GraphQL API server at http://localhost:4000/${yoga.graphqlEndpoint}`
+  )
 })
 ```