Nuxt-Apollo查询Orchard-Core过滤产品时出现服务器响应缺失错误

问题排查与修复方案 #

存在三处核心错误，分别修正即可解决问题：

1. 变量名拼写错误
   你定义的查询常量名称为FILTERED_PRODUCTS_QUERY，但在$apollo.query调用时误写为FILTERED_PRODUCT_QUERY，缺少末尾的s，会直接触发查询对象未定义的报错。
2. Orchard Core GraphQL过滤语法不符合规范
   Orchard Core 自带的GraphQL接口不支持filter: { 字段名: 值 }的传参格式，使用where参数时也不能直接给字段赋值，需要额外指定匹配操作符（全等用eq、模糊包含用contains等）。
3. 返回值解构错误
   Orchard Core 的product查询过滤后直接返回匹配结果数组，不需要额外解构results字段。

修正后的完整代码 #

import gql from 'graphql-tag'

const FILTERED_PRODUCTS_QUERY = gql`
  query FILTERED_PRODUCTS ($description: String!) {
    product (where: { description: { eq: $description } }) {
      contentItemId
      displayText
      description
      badge
    }
  }
`;

export default {
  data () {
    return {
      descriptionText: 'Van-gogh',
      searchResults: null
    }
  },
  methods: {
    async search() {
      const res = await this.$apollo.query({
        query: FILTERED_PRODUCTS_QUERY,
        variables: {
          description: this.descriptionText
        }
      })

      if (res?.data?.product?.length) {
        this.searchResults = res.data.product
        // 直接alert对象会显示[object Object]，转成JSON字符串查看内容
        alert(JSON.stringify(this.searchResults[0]))
      }
    }
  }
}

补充说明 #

如果需要模糊查询所有description包含指定字符串的结果，把eq操作符替换为contains即可。

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