Отключить предварительную выборку по КСВ

Question

Я пытаюсь реализовать библиотеку swr для получения данных. Я использовал простые аксиомы и некоторые созданные мной собственные хуки. Проблема, с которой я столкнулся, заключается в том, что по какой-то причине swr запускает запрос на получение до того, как установлен заголовок axios по умолчанию, поэтому отсутствует при отправке заголовка, необходимого для идентификации учетной записи для моего приложения. Я предполагаю, что это связано с возможностями предварительной выборки SWR, но это просто дикая догадка, и я не знаю, как этого избежать.

import axios from "axios";
import React, {useLayoutEffect} from "react";
import useSWR from "swr";


function Child({match}) {
    const fetcher = () => {
        console.log('Should happen second')
        axios.get('https://api.mydomain.com').then(res => res.data)
    }

    const {data} = useSWR('/account/specific/data', fetcher)

    return <div>{JSON.stringify(data)}</div>
}

export default function Account({match}) {

    let accountId = match.params.accountId;

    useLayoutEffect(() => {
        console.log('Should happen first')
        axios.defaults.headers.common["Account-Token"] = accountId;
    }, [accountId]);

    return <Child/>
}

Answer 1

Вы неправильно понимаете последовательность, imo.

1) Вероятно, вам следует вернуть null, если ваш компонент не готов к созданию.

export default function Account({match}) {

    let accountId = match.params.accountId;

    useLayoutEffect(() => {
        console.log('Should happen first')
        axios.defaults.headers.common["Account-Token"] = accountId;
    }, [accountId]);
    
    if (!accountId) return null  //<-- don't generate the Child component until you are ready.

    return <Child/>
}

2) Если вы действительно хотите отключить выборку SWR при монтировании, установите { revalidaOnMount: false }

например

const {data} = useSWR('/account/specific/data', fetcher, { revalidateOnMount: false})

3) Или вы можете использовать условную выборку, чтобы она извлекалась только тогда, когда ваша переменная готова.

const { data } = useSWR( accountID ? /url/path : null, fetcher )

Ловушка useSWR не будет вызывать сборщик, если ключ равен нулю.

Answer 2

Вы используете axios без async и await , также у вас нет возврата в сборщике метода, измените этот метод следующим образом:

          const fetcher = async () => {
        return await axios.get('https://api.mydomain.com').then(res => res.data)
    }

Answer 3

Мне удалось решить проблему, добавив initialData в параметры хука useSWR.

    const { data, error } = useSWR('/api/data', fetcher, initialData: [], revalidateOnMount: true)