#Forwarding errors returned to useFetch and $fetch

9 messages · Page 1 of 1 (latest)

gleaming violet
#

I have a Nuxt 3 pulling from Craft CMS's GraphQL API via useFetch and $fetch. It's working well, but it doesn't handle GraphQL errors. How do I make Nuxt show them to me?

The following works great and returns data.

server/api/craft.js

export default defineEventHandler(async (event) => {
    const body = await readBody(event);
    const baseUrl = useRuntimeConfig().craftApiUrl;
    const { data } = await $fetch(baseUrl, {
        method: 'post',
        headers: {
            'Content-Type': 'application/json',
        },
        body: body.gql,
    });

    return data;
});

index.vue

<template>
    <div>
        Pending: {{ pending }} <br /><br />
        Error: {{ error }} <br /><br />
        Data:
        <pre>{{ data }}</pre>
    </div>
</template>

<script setup>
const { data, pending, error } = await useFetch('/api/craft', {
    method: 'post',
    body: {
        gql: JSON.stringify({
            query: `query SomeQuery {
            entry(section: "homepage") {
                id
                title
            }
        }`,
            variables: {},
        }),
    },
});
</script>
#

If I make a typo in the GraphQL query like say "titles" instead of "title". I get this error from Nuxt which isn’t helpful at all: "Error: (404 Cannot find any route matching /api/craft. (/api/craft))"

Craft CMS's GraphQL API does return useful error messages in a regular terminal. For example:

curl -H "Content-Type: application/graphql" -d '{entry(section: "homepage") {id title} }' http://craftapi.test/api would return the same data as Nuxt, but:

curl -H "Content-Type: application/graphql" -d '{entry(section: "homepage") {id titles} }' http://craftapi.test/api would return:

{"errors":[{"message":"Cannot query field \"titles\" on type \"EntryInterface\". Did you mean \"title\"?","extensions":{"category":"graphql" This is quite helpful for debugging during development. How do get Nuxt to display these messages for me? I've tried a bunch of things with useFetch and $fetch, but never had any luck returning this error.

silver condor
#

maybe wrap the $fetch call and see what error you get.
Just rememer to retrow a helpful error and not use return

pliant rock
gleaming violet
gleaming violet
# pliant rock https://nuxt.com/docs/getting-started/error-handling#errors-during-api-or-nitro-...

I added the header and I already had an error.vue page, but it's not getting used. Any idea why? The only errors I can get are from the error object from UseFetch: "FetchError: (404 Cannot find any route matching /api/craft. (/api/craft))" and "Error: (404 Cannot find any route matching /api/craft. (/api/craft))". The error changes depending on if the page was rendered on the server or not.

silver condor
# 
export default defineEventHandler(async ({ context }) => {
  try {
    return await fetch('google.de').then(r => r.json())
  } catch (error) {
    // transform error and make it helpful

    throw createError({
      statusCode: 500,
      statusMessage: JSON.stringify(error)
    })
  }
})

Hope it helps

gleaming violet
silver condor