Next.js/React外部queries.ts向GraphQL查询传参方法

你之前的写法存在两个核心错误：一是将查询定义为接收slug的函数但调用时未执行传参，二是使用字符串插值拼接动态参数不符合GraphQL与Apollo Client的标准规范，不仅存在注入风险，还会导致Apollo缓存失效。

标准实现步骤 #

• 第一步：改造独立查询文件，使用GraphQL原生变量语法定义查询，不要在gql模板中做字符串插值

// queries.ts
import { gql } from '@apollo/client';

// 直接导出查询文档常量，声明需要接收的变量及对应类型
export const GET_PAGE_QUERY = gql`
  query GetPage($slug: ID!) {
    page(id: $slug, idType: SLUG) {
      title
      // 可按需扩展其他需要的返回字段
    }
  }
`;

• 第二步：调用查询时，通过Apollo Client的variables配置项传入动态参数

// 页面路由文件（如pages/[slug].tsx）
import { client } from '你的apollo client实例初始化路径';
import { GET_PAGE_QUERY } from 'queries';

export async function getStaticProps({ params }) {
  // 从路由参数中拿到slug值
  const targetSlug = params.slug;
  const { data } = await client.query({
    query: GET_PAGE_QUERY,
    // 所有动态参数统一放在variables字段下，key与查询中声明的$变量名保持一致
    variables: {
      slug: targetSlug
    }
  });

  return {
    props: {
      page: data.page
    },
    // 按需配置ISR的revalidate规则即可
  };
}

不推荐函数包裹+字符串插值写法的原因 #

• 直接拼接字符串存在GraphQL注入风险，特殊字符未做转义时极易触发查询报错
• 传入不同参数会生成全新的查询文档，Apollo Client无法命中已有缓存，会产生不必要的重复请求
• 不符合Apollo的设计规范，后续对接缓存更新、自动refetch等特性时会出现异常

注意：如果参数是非必填的，声明变量时去掉类型后的感叹号即可，比如$slug: ID就代表该参数可缺省。

内容的提问来源于stack exchange，提问作者al.tron