带有 graphql-request 的 useSWR 在传递参数后无限发送请求

Question

我在这里创建了一个自定义挂钩，用于获取带有参数 search 的预订列表，这是预订的 status，默认情况下为 'NEW'，它可以是在具有不同 search 值的任何地方重复使用并获得预订状态。

问题是请求成功了，根据传入的参数得到了结果

但是在网络调用中它不断地向服务器发送请求，比如 4 requests/sec

获取预订的自定义挂钩

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 && data?.bookingList, error };
}

export default useBooking;

这是接受参数并正在执行的 graphql 查询。

使用输入参数获取预订列表的 GraphqQL 查询。

import { gql } from "graphql-request";

export const getBookingList = gql`
    query getBookingList($search: String) {
        bookingList(search: $search) {
            id
            date
            pickupLoc {
                coordinates
            }
            dropoffLoc {
                coordinates
            }
            time
            pickup
            dropoff
            journey
            price
            name
            status
            driver {
                id
                referenceId
                user {
                    username
                }
            }
            driverNotes
            customerNotes
            customer {
                phone
            }
            paymentType
            vehicleType {
                name
            }
        }
    }
`;

这是我的 swrFetcher，用于使用 SWR 从 graphql 获取数据。

import { GraphQLClient } from "graphql-request";

const graphqlFetcher = new GraphQLClient(`${process.env.NEXT_PUBLIC_GRAPHQL_API}`);

export const swrFetcher = (query, variables) => graphqlFetcher.request(query, variables);

我遵循了这个 Arguments in SWR and the answer ，但没有任何帮助。

Answer 1

我错了，我做错了。查看此处的 Multiple Arguments 部分后，清楚地提到了这个问题。只需要将我的自定义挂钩更改为此：

const { data, error } = useSWR([getBookingList, search], (url, value) => swrFetcher(url, { search: value }));

之后一切正常。

带有 graphql-request 的 useSWR 在传递参数后无限发送请求

useSWR with graphql-request keeps sending requests infinitely after arguments are passed

reactjs

graphql

next.js

react-hooks

swr