Vue.js Vue Apollo查询ID为的单个项目

我试图使用Vue Apollo查询单个产品，但我不明白我做错了什么。在控制台中，我得到以下错误：

Observable.js？a7b2:65 uncaughttypeerror:无法读取未定义的属性“product”

查询：

export const getProduct = gql`
  query getProduct ($productId: ID!) {
    product (where: {id: $productId}) {
      id
      title
      description
      price
      productDetails {
        html
      }
      productAssets {
        id
        url
      }
    }
  }
`;

apollo: {
  $loadingKey: 'loading',
  products: {
    query: getProduct,
    variables: {
      $productId: 'ABC123',
    },
    result ({data}) {
      this.loading = false;
      this.product = data.product;
      this.assets = data.assets;
    },
    error () {
      this.error = true;
      this.sentryError = error;
    },
  },
},

组件：

export const getProduct = gql`
  query getProduct ($productId: ID!) {
    product (where: {id: $productId}) {
      id
      title
      description
      price
      productDetails {
        html
      }
      productAssets {
        id
        url
      }
    }
  }
`;

apollo: {
  $loadingKey: 'loading',
  products: {
    query: getProduct,
    variables: {
      $productId: 'ABC123',
    },
    result ({data}) {
      this.loading = false;
      this.product = data.product;
      this.assets = data.assets;
    },
    error () {
      this.error = true;
      this.sentryError = error;
    },
  },
},

不管我如何硬编码ID，它都能工作

export const product = gql`
  query getProduct ($product: ID!) {
    product (where: {id: "ABC123"}) {
      id
      title
      description
      price
      productDetails {
        html
      }
      productAssets {
        id
        url
      }
    }
  }
`;

---

我看不出我缺少什么，任何帮助都将不胜感激。

首先，可能需要参数。您设置了

$product:ID（通过
！
）为必填项

操场
-运行查询的选项：

1.按“硬代码”查询
“无论我如何硬编码ID，它都能工作”

这是第一种方法（在查询中手动声明参数）

2.“查询变量”选项卡
单击[QUERY VARIABLES]并以JSON格式传递vars变量


图形QL变量额外读取：

export const getProduct = gql`
  query getProduct ($productId: ID!) {
    product (where: {id: $productId}) {
      id
      title
      description
      price
      productDetails {
        html
      }
      productAssets {
        id
        url
      }
    }
  }
`;

apollo: {
  $loadingKey: 'loading',
  products: {
    query: getProduct,
    variables: {
      $productId: 'ABC123',
    },
    result ({data}) {
      this.loading = false;
      this.product = data.product;
      this.assets = data.assets;
    },
    error () {
      this.error = true;
      this.sentryError = error;
    },
  },
},




Vue-带参数的查询：
变量：{productId:'ABC123'}
？