Way to return 404 http error code in render()

Is your feature request related to a problem? Please describe. Right now you can return 404 http error code only in getInitialProps, which is not nice, since you have to fetch the data twice. Once in getInitialProps to return the right http response code and once in the component itself when using apollo, so you will have loading property etc.

Describe the solution you’d like With react-router-dom you can have a component like this:

import React from 'react';
import { Route } from 'react-router-dom';

const NotFound = () => {
  return (
    <Route render={({ staticContext }) => {
      if (staticContext) {
        staticContext.status = 404;
      }
      return (
        <div>
          <h1>404 : Not Found</h1>
        </div>
      )
    }}/>
  );
};

export default NotFound;

With this component, you can simply have your apollo HOC near the components and SSR returns the correct http codes without the need for getInitialProps.

It would be great to be able to return http codes from render()

[adamsoffer]

@kachkaev here’s a workaround…

import Error from 'next/error'

export const throw404 = () => {
  if (process.browser) {
    return <Error statusCode={404} />
  }
  const e = new Error()
  e.code = 'ENOENT'
  throw e
}

[shauns]

Similar use-case – I use Apollo for GraphQL and I would like to return a 404 on server renders where the result of a query is (for instance) empty.

My <Query> lives inside render as expected (in fact, same as the example Next.JS+Apollo code). So in getInitialProps I don’t have access to the [empty] data yet in order to return a 404 through res.

My current workaround is pretty gross:

<Query query={getResponses} variables={{ foo: this.props.bar }}>
  {({ loading, error, data }) => {
    // Check for error, loading etc.
    const responses = data.allResponses.nodes;
    if (responses.length === 0) {
      const e = new Error("Response not found");
      e.code = "ENOENT";  // Triggers a 404
      throw e;
    }