Landing Page

When GraphQL Yoga hits 404, it returns a default landing page like below;

If you don’t expect to hit 404 in that path, you can configure graphqlEndpoint to avoid this page.


import { createYoga } from 'graphql-yoga'
 
const yoga = createYoga({
  graphqlEndpoint: '/my-graphql-endpoint'
})

How ever you can disable the landing page, and just get 404 error directly by setting landingPage to false.


import { createYoga } from 'graphql-yoga'
 
const yoga = createYoga({
  landingPage: false
})

You can also customize the landing page by passing a custom renderer that returns Response to the landingPage option.


import { createYoga } from 'graphql-yoga'
 
const yoga = createYoga({
  landingPage: ({ url, fetchAPI }) => {
    return new fetchAPI.Response(
      /* HTML */ `
        <!doctype html>
        <html>
          <head>
            <title>404 Not Found</title>
          </head>
          <body>
            <h1>404 Not Found</h1>
            <p>Sorry, the page (${url.pathname}) you are looking for could not be found.</p>
          </body>
        </html>
      `,
      {
        status: 404,
        headers: {
          'Content-Type': 'text/html'
        }
      }
    )
  }
})

💡

Response is part of the Fetch API, so if you want to learn more about it, you can check the MDN documentation .