How do you deal with useQuery returning undefined when response status is 404 or 500?

[jinsley8]

I'm having an issue with useQuery returning undefined error.

In @tanstack/react-query-devtools when I view the Query Explorer for the query, under state it shows error: {"name":"Error","message":"undefined"}

The query function looks like this:

// useAsst.ts - uses getAssetData() function

export function useAssetData(tokenId: string) {
    return useQuery(['asset', tokenId], () => getAssetData(tokenId), {
        enabled: tokenId !== undefined,
    });
}

// /api.ts - getAssetData() gets Next.js API Route /api/asset/tokenId

const getAssetData = async (tokenId: string) => {
    try {
        const response = await axios.get<HttpResponse<AssetType>>(`/api/asset/${tokenId}`);
        return response.data;
    } catch (err) {
        Sentry.captureException(err);
        console.error(err);
    }
};

// /pages/api/asset/[tokenId].ts

const handler: NextApiHandler = async (req: NextApiRequest, res: NextApiResponse) => {
    const { tokenId } = req.query as { tokenId: string };

    if (req.method === 'GET') {
        try {
            // regex to check is token Id is all numbers and valid
            const isTokenId = containsTokenId(tokenId);

            if (!isTokenId) {
                return res.status(400).json({ message: 'Bad request' });
            }

            if (isTokenId) {
                const response = await axios.get<HttpResponse<AssetType>>(
                    `https://call-external-api-url`
                );
                const data = response.data;

                res.status(200).json(data);
            }
        } catch (err) {
            Sentry.captureException(err);
            console.error(err);

            if (err.response) {
                res.status(err.response.status).send(err.response.data);
            } else if (err.request) {
                console.log(err.request);
            } else {
                console.log('Error', err.message);
            }
        }
    } else {
        res.setHeader('Allow', ['GET']);
        res.status(405).end(`Method ${req.method} Not Allowed`);
    }
};

export default Sentry.withSentry(handler);

So I'm not sure what I'm doing wrong where useQuery returns error undefined?

[Birkbjo]

You should rethrow the error in getAssetData().

const getAssetData = async (tokenId: string) => {
    try {
        const response = await axios.get<HttpResponse<AssetType>>(`/api/asset/${tokenId}`);
        return response.data;
    } catch (err) {
        Sentry.captureException(err);
        console.error(err);
        throw err // <-- need to throw here
    }
};

See https://tanstack.com/query/v4/docs/guides/query-functions#handling-and-throwing-errors

[TkDodo]

This is also part of the FAQs:

https://tkdodo.eu/blog/react-query-fa-qs#why-do-i-not-get-errors-

[jinsley8]

Ahh Thanks friends! @Birkbjo @TkDodo