Блог

Я пытаюсь запросить один продукт с помощью Vue Apollo, но я не понимаю, что я делаю не так. В консоли я получаю следующую ошибку: Observable.js?a7b2:65 Uncaught TypeError: Cannot read property 'product' of undefined

Запрос:

 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 product = gql`
  query getProduct ($product: ID!) {
    product (where: {id: "ABC123"}) {
      id
      title
      description
      price
      productDetails {
        html
      }
      productAssets {
        id
        url
      }
    }
  }
`;
  

Я не вижу, чего мне не хватает, любая помощь будет очень признательна.

Во-первых, могут потребоваться аргументы. Вы установили, что $product: ID! (by ! ) является обязательным.

Playground — параметры для выполнения запроса:

1. ЗАПРОС с помощью «жесткого кода»

«Если я, однако, жестко закодирую идентификатор, это сработает»

Это первый способ (вы объявляете аргумент вручную в своем запросе).

2. Вкладка «ПЕРЕМЕННЫЕ ЗАПРОСА»

Нажмите [ПЕРЕМЕННЫЕ ЗАПРОСА] и передайте переменные vars в формате JSON.

дополнительное чтение переменных graphql:

• https://levelup.gitconnected.com/introduction-to-graphql-variables-and-complex-operations-2065d8cd2377

Vue — запрос с параметрами:

 // Apollo-specific options
apollo: {
  // Query with parameters
  ping: {
    // gql query
    query: gql`query PingMessage($message: String!) {
      ping(message: $message)
    }`,
    // Static parameters
    variables: {
      message: 'Meow',
    },
  },
},
  

https://apollo.vuejs.org/guide/apollo/queries.html#query-with-parameters