Почему разное значение переменной в NUXT 3?

Question

[RomyGalaxy]

async function getPosts () {
        let total = ref(null);
        const { data: articles, refresh } = await useFetch(url, {
            method: 'GET',
            server: true,
            query: {
                per_page: perPage.value,
                page: page.value,
            },
            onResponse(context) {
                total.value = Number(context.response.headers.get('X-WP-Total'))
            },
            onResponseError({ request, response, options }) {
                console.log('Ошибка запроса'+ request)
            }
        });
    console.log(total.value);
}

В onResponse задается значение переменной равное значению заголовка X-WP-Total
В результате чего при выводе в console.log SSR отображает верное значение, а на клиенте null

Comments

[director-rentv]

А если в total.value положить что-нибудь из data ответа? Сдаётся мне, что не сохраняет nuxt заголовки ответа для передачи с SSR режима в клиента.

Запрос в принципе на клиенте отправляется?

[RomyGalaxy]

director-rentv, когда я делаю запрос отдельный на заголовки с помощью $fetch, то все прекрасно работает

const getHeaders = await $fetch(url, {
            method: 'GET',
            server: true,
            query: {
                per_page: perPage.value,
                page: page.value,
            },
            onResponse(context) {
                total.value = Number(context.response.headers.get('X-WP-Total'));
                totalPages.value = Number(context.response.headers.get('X-WP-TotalPages'));
            }
        });

Answer 1

[Андрей]

Это так не работает. Передача состояние с сервера на клиент не происходит сама по себе, его нужно прокидывать, для этого в Nuxt сделано много утилит (useAsyncData, useLazyAsyncData, useNuxtData, useState и т.д.), которые пляшут вокруг большого сериализуемого стейта, который на клиенте обратно десериализуется. И useFetch использует это под капотом.

То есть ваш код работает так:
1. На сервере вызывается функция getPosts
2. Выполняется запрос, результат сохраняется в стейт накста, в total.value записывается значение
3. На клиенте вызывается функция getPosts
4. Но тут уже запрос не выполняется, только вычитывается значение из стейта, соответственно onResponse не вызывается

Решить это можно несколькими путями: создать отдельный стейт для total, либо к ответу в onResponse дописывать значение заголовка.

<script setup lang="ts">
const { data } = useFetch('https://jsonplaceholder.typicode.com/todos/1', {
  onResponse({ response, options }) {
    // дописываем в data значение заголовка
    response._data.type = response.headers.get('Content-Type');;
  },
});
</script>

Сериализованное состояние, которое идет с сервера на клиент можно дебажить через Nuxt Devtools

Comments

[RomyGalaxy]

Благодарю за развернутый ответ

[RomyGalaxy]

а как отдельный стейт создать?

[Андрей]

Например так

<script setup lang="ts">
async function getPosts() {
  const total = useState<string | null>('total', () => null);

  const { data } = await useFetch(
    'https://jsonplaceholder.typicode.com/todos/1',
    {
      onResponse({ response }) {
        total.value = response.headers.get('Content-Type');
      },
    }
  );

  console.log(total.value);
}

getPosts();
</script>

[RomyGalaxy]

Андрей, спасибо