Nuxt•4mo ago

Execute a useFetch 2 times

With the debugger, I realized that once refresh is executed in my status 200 if, the function restarts at console.log(response) and returns a success and then an error (so I enter my onResponse twice).

await useFetch('/api/articles/createArticle', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: form.value,
      onResponse({response}) {
        console.log(response);
        if (response.status === 200) {
          toast.add({
            id: "success",
            color: "green",
            icon: "i-heroicons-check-circle",
            title: t('admin.sales.success'),
            description: t('admin.sales.the-yacht-created'),
          });
          isOpenCreate.value = false;
          console.log('refresh');
          resetForm();
          refresh();
        } else {
          toast.add({
            id: "error",
            color: "red",
            icon: "i-heroicons-x-circle",
            title: t('admin.sales.an-error-occurred'),
            description: t('admin.sales.please-try-again') + response._data.message,
          });
        }
      },
    });

await useFetch('/api/articles/createArticle', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: form.value,
      onResponse({response}) {
        console.log(response);
        if (response.status === 200) {
          toast.add({
            id: "success",
            color: "green",
            icon: "i-heroicons-check-circle",
            title: t('admin.sales.success'),
            description: t('admin.sales.the-yacht-created'),
          });
          isOpenCreate.value = false;
          console.log('refresh');
          resetForm();
          refresh();
        } else {
          toast.add({
            id: "error",
            color: "red",
            icon: "i-heroicons-x-circle",
            title: t('admin.sales.an-error-occurred'),
            description: t('admin.sales.please-try-again') + response._data.message,
          });
        }
      },
    });

6 Replies

FurnaxeOP•4mo ago

Up !

oneeach•4mo ago

what is your refresh() function?

FurnaxeOP•4mo ago

const { data: articles, error, refresh } = useFetch(
    '/api/articles/getAllArticles', {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json'
      },
      params: {
        page: page
      },
    });

const { data: articles, error, refresh } = useFetch(
    '/api/articles/getAllArticles', {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json'
      },
      params: {
        page: page
      },
    });

oneeach•4mo ago

why are you calling refresh() within the useFetch? can you replicate the error here: https://stackblitz.com/

FurnaxeOP•4mo ago

https://stackblitz.com/edit/nuxt-starter-j6phjk?file=types%2Findex.ts

Julien Pavoni

StackBlitz

Nuxt - Starter (forked) - StackBlitz

Create a new Nuxt project, module, layer or start from a theme with our collection of starters.

FurnaxeOP•4mo ago

It's a mess the code may be but I'm learning

Gaming

Programming

Execute a useFetch 2 times