使用useSWR与graphql-request传递变量时遇问题，求解决方案

核心问题排查 #

你遇到的 Cannot read properties of undefined (reading 'filter') 错误，本质是后端未接收到预期的 where 变量，大概率是自定义 fetcher 未生效或变量传递逻辑出错导致的。下面是针对性的解决方案：

1. 修正 SWRConfig 标签闭合 #

你的代码中存在明显的标签语法错误：<SWRConfig> 未正确闭合，导致自定义 fetcher 没有被应用到子组件的 useSWR 调用中，useSWR 会使用默认的 fetch 方法（而非你定义的 graphql 请求逻辑），自然无法正确传递变量。

正确的 SWRConfig 包裹代码：

import { SWRConfig } from 'swr';
import { GraphQLClient } from 'graphql-request';

// 初始化 graphql 客户端
const graphqlClient = new GraphQLClient('你的 GraphQL 服务端点');

// 定义 fetcher：接收查询语句和变量，传递给 graphql-client
const fetcher = (query, variables) => {
  // 可选：添加日志调试参数是否正确传递
  console.log('查询语句:', query);
  console.log('变量:', variables);
  return graphqlClient.request(query, variables);
};

function App() {
  return (
    <SWRConfig value={{ fetcher }}>
      {/* 这里包裹需要使用 useSWR 的组件 */}
      <ArticleDetail />
    </SWRConfig>
  );
}

2. 正确调用 useSWR 传递变量 #

修正 SWRConfig 后，按你原本的数组 key 方式传递变量即可，确保变量结构与 GraphQL 查询定义一致：

import useSWR from 'swr';
import { GetArticleById } from './your-query-file';

function ArticleDetail() {
  const { data, error, isLoading } = useSWR([
    GetArticleById,
    {
      where: {
        id: "article123",
      },
    },
  ]);

  if (isLoading) return <div>加载中...</div>;
  if (error) return <div>请求失败：{error.message}</div>;

  // 渲染数据
  return (
    <div>
      <h2>{data.articles[0].name}</h2>
      <p>{data.articles[0].description}</p>
      {/* 渲染门店等关联数据 */}
    </div>
  );
}

3. 排除后端/查询本身问题 #

如果修正后仍报错，建议直接绕过 SWR 测试 graphql-client 的请求逻辑，确认查询和变量是否符合后端要求：

// 在组件中添加测试函数
const testDirectRequest = async () => {
  try {
    const result = await graphqlClient.request(GetArticleById, {
      where: { id: "article123" }
    });
    console.log('直接请求结果:', result);
  } catch (err) {
    console.error('直接请求错误:', err);
  }
};

// 调用测试（可在组件挂载时执行）
useEffect(() => {
  testDirectRequest();
}, []);

如果直接请求也报错，说明问题出在 GraphQL 查询定义（比如 ArticleWhere 类型匹配）或后端逻辑上，需要排查后端对 where 参数的处理代码。

内容的提问来源于stack exchange，提问作者Learn on hard way