使用Strapi V4 GraphQL与Next.js时筛选功能失效求助

问题概述 #

使用搭载GraphQL扩展的Strapi V4，在GraphQL Playground及Postman中，带变量的筛选查询均可正常返回匹配的订单数据，但在Next.js项目中执行逻辑一致的查询时，筛选功能失效，仅返回包含data、loading、networkStatus的对象，多次排查未找到原因。

可正常运行的查询示例 #

GraphQL Playground 查询 #

query getOrdersFilterList($searchstring: String!) {
  orders(filters: { customer: { contains: $searchstring } }) {
    data {
      attributes {
        number
        customer
        name
        article
      }
    }
  }
}

查询变量：

{
  "searchstring": "zi"
}

Postman 查询 #

query getOrdersFilterList($searchstring: String) {
  orders(filters: {customer: { containsi: $searchstring}}) {
    data {
      attributes {
        number
        customer
        name
        article
      }
    }
  }
}

GraphQL变量：

{
  "searchstring": "zi"
}

以上两种环境均返回符合预期的匹配订单数据。

Next.js 项目中的代码 #

export const getOrdersFilterList = async (page, pageSize, searchstring) => {
  const data = await client.query({
    query: gql`
      query getOrdersFilterList($searchstring: String) {
        orders(filters: {customer: { contains: $searchstring}}){
          data {
            attributes {
              number
              customer 
              name
              article
            }
          }
        }
      }`,
    variables: {searchstring}
  })
}

传入变量：

{
  "searchstring": "zi"
}

返回结果 #

Firefox控制台返回：

Object { data: {…}, loading: false, networkStatus: 7 }

排查方向 #

• 检查Apollo Client配置：确认客户端是否正确指向Strapi的GraphQL端点，同时验证Strapi中orders内容类型的public权限是否开启了查询权限。
• 验证变量传递：在函数内打印searchstring，确认实际传入的值是否为预期的"zi"，避免出现undefined或值不匹配的情况。
• 调整筛选操作符：Playground使用区分大小写的contains，Postman用不区分大小写的containsi，Next.js当前用的是contains，若数据库中customer字段值大小写不匹配，可尝试替换为containsi。
• 查看完整返回数据：展开控制台返回的data对象，检查data.orders.data是否为空数组——可能是筛选后确实无匹配数据，而非筛选逻辑失效。
• 处理分页参数：函数接收了page和pageSize但未在查询中使用，Strapi默认分页可能导致仅返回第一页但无匹配数据，可添加分页参数：

  query getOrdersFilterList($searchstring: String, $page: Int, $pageSize: Int) {
    orders(
      filters: {customer: { containsi: $searchstring}},
      pagination: {page: $page, pageSize: $pageSize}
    ) {
      data {
        attributes {
          number
          customer 
          name
          article
        }
      }
    }
  }
  

  同时在变量中传入page和pageSize。
• 禁用客户端缓存：Apollo Client可能缓存旧数据，添加fetchPolicy: 'network-only'强制请求最新数据：

  const data = await client.query({
    query: gql`...`,
    variables: {searchstring, page, pageSize},
    fetchPolicy: 'network-only'
  })
  

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