在 SWR 上禁用预取

Question

我正在尝试为我的数据获取实现 swr 库。我曾经使用普通的 axios 和我创建的一些自定义钩子。 我遇到的问题是，由于某种原因，swr 在设置默认 axios 标头之前触发了 get 请求，因此在发送标识我的应用程序帐户所需的标头时丢失了。 我的猜测是它与 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

您正在使用没有 async 和 await 的 axios，而且您在方法获取器中没有 return，请更改此方法下一个方法：

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

Answer 2

我能够解决将 initialData 添加到 useSWR 挂钩选项的问题。

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

Answer 3

你的序列错了。

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) 如果你真的想在 mount 时禁用 SWR fetch，那就设置 { revalidaOnMount: false }

例如

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

3) 或者您可以使用条件提取，以便仅在您的变量准备好时提取。

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

当key为null时useSWR钩子不会调用fetcher。