How to display custom Nextjs error page when api call fails?

Question

I created a custom Nextjs error page that I would like to display when the api call fails. What is currently happening is even if the api call fails, it still displays the same page as a successful route. For example, I have a route that is companies/neimans that pulls data from an api to display certain text on the page. If I type, companies/neiman I want my custom error page to show, but it is displaying the same page as if going to companies/neimans just without the data coming from the api. I do get a 404 in the console when visiting a url that is invalid but it doesn't display the custom error page or the default next js 404 page.
In my file system I have a pages directory and inside that a directory called companies with a file [companydata].tsx and one called 404.tsx. [companydata].tsx is the page that dynamically displays information about the company from the api.

This is what my api call currently looks like:

export const getCompanies = async (routeData: string): Promise<Company> => {
  const client = getApiClient();
  const response = await client.get<Company>(`api/companies/${routeData}`);
  if (response) {
    return response.data;
  }
  return {} as Company;

In the [companydata].tsx, I tried to do a check if the object was empty to then redirect to companies/404 but doing so makes it always display the 404 page.

if (Object.keys(company).length === 0) {
  return <Redirect to="/company/404"/>;
}

If I console.log the company, it is rendering multiple times. The first 6 times, it is an empty array so that would explain why the 404 page is always showing. The data doesn't come through until after the 6th render. I am not sure why that is.

I am calling getCompanies inside another function,

export const getData = async (companyName: string): Promise<[Company, Sales]> => {
  if (companyName) {
    return (await Promise.all([getCompanies(companyName), getSales()])) as [
      Company,
      Sales
    ];
  }
  return [{} as Company, {} as Sales];
};

I am calling getData inside a useEffect within [companydata].tsx.

const Company: NextPage = (): JSX.Element => {
  const [selectedCompany, setSelectedCompany] = useState<Company>({} as Company);
  const [salesAvailable, setSalesAvailable] = useState<boolean>(false);
  const [sales, setSales] = useState<Sales>({} as Sales);
  const router = useRouter();
  const {companydata} = router.query;

  useEffect(() => {
    const init = async (companyName: string) => {
    const [companyData, salesData] = await getData(companyName);

    if (companyData) {
      setSelectedCompany(companyData);
    }
    if (salesData) {
      setSalesAvailable(true);
      setSales(salesData);
    } else {
    setSalesAvailable(false);
    }
  }
};
  init(companydata as string);
};
}, [companydata]);

// returning company page here

Answer 1

You currently do not have a method to check the status of the API call. There are four possible outcomes of most API calls - data, no data, error, and loading. You should add the status checks in your API calls

Below are two examples of how this can be achieved.

get companies hook

export const useGetCompanies = async (path: string) => {
    const [data, setData] = useState<Company>();
    const [error, setError] = useState(false);
    const [loading, setLoading] = useState(false);

    try {
        setError(false);
        setLoading(true);
        const client = getApiClient();
        const response = await client.get(`api/companies/${path}`);
        setData(response.data);
    } catch (error) { 
        setError(true);
    } finally {
        setLoading(false);
    }

    return {data, error, loading};
};

---

Since your data isn't related you also do a generic API fetch call something like

export async function useFetchData<T>(path:string){
    const [data, setData] = useState<T>();
    const [error, setError] = useState(false);
    const [loading, setLoading] = useState(false);

    try {
        setError(false);
        setLoading(true);
        const client = getAPIClient();
        const response = await client.get<{ data: T }>(path);
        if(response) setData(response.data);
    } catch (error) {
        setError(true);
    } finally {
        setLoading(false);
    }

    return { data, error, loading };
};

Example use.

const Company = async () =>{
    const { query } = useRouter();
    const company = await useFetchData<Company>(`api/companies/${query.companydata}`);
    const sales = await useFetchData<Sales>(`api/companies/${query.companydata}/sales`);

    if (company.loading || sales.loading) return <p>Loading...</p>;
    if (company.error || sales.error) return <p>Error or could show a not found</p>;
    if (!company.data || !sales.data) return <Redirect to="/company/404"/>;
    return "your page";
}

It would be best to render the data independently of each other on the page and do the if checks there. This is beneficial because you don't have to wait for both calls to complete before showing the page.

I'd create two separate components (company and sales) and place the corresponding API call in each.

---

Typically assigning empty objects ({} as Company or {} as Sales) to defined types is bad practice because it makes TS think the object's values are defined when they are not - defeating the purpose of using TS.

They should be left undefined, and there should be a check to see if they are defined.

Lastly, I can't test the code because I don't have access to the original code base so there might be bugs, but you should get a pretty good idea of what's happening.