传入参数后useSWR结合graphql-request出现无限重复发送请求问题

问题原因 #

• SWR 会以传入的第一个参数作为缓存key，每次渲染时对key做浅比较，判断是否需要重新触发请求
• 你当前传入的key是 [getBookingList, {search}]，其中 {search} 是每次渲染都会重新生成的新对象，浅比较永远返回不相等，导致SWR持续触发请求，形成无限循环。

解决方案 #

方案1：使用useMemo稳定参数引用（通用性更强，适合多参数场景） #

通过useMemo包裹SWR的key数组，仅当search值变化时才生成新的key，避免不必要的重请求：

import { useMemo } from "react";
import { getBookingList } from "@graphql/bookings/queries";
import { swrFetcher } from "../fetcher";
import useSWR from "swr";

function useBooking(search="NEW") {
    const swrKey = useMemo(() => [getBookingList, { search }], [search]);
    const { data, error } = useSWR(swrKey, swrFetcher);
    return { data: data?.bookingList, error };
}

export default useBooking;

方案2：调整key为全原始值结构 #

如果只有search一个查询参数，也可以直接把key改为原始值组成的数组，不需要额外引入useMemo，同步调整fetcher的参数处理逻辑即可：

// swrFetcher 调整
import { GraphQLClient } from "graphql-request";

const graphqlFetcher = new GraphQLClient(`${process.env.NEXT_PUBLIC_GRAPHQL_API}`);
export const swrFetcher = (query, search) => graphqlFetcher.request(query, { search });

// useBooking 调整
import { getBookingList } from "@graphql/bookings/queries";
import { swrFetcher } from "../fetcher";
import useSWR from "swr";

function useBooking(search="NEW") {
    const { data, error } = useSWR([getBookingList, search], swrFetcher);
    return { data: data?.bookingList, error };
}

export default useBooking;

内容的提问来源于stack exchange，提问作者aitsamahad