Как передавать переменные в GraphQL запрос в компонентах React?

Question

[Егор Довыденко]

Добрый день. У меня есть компонент Продукта, который получает id элемента из другого компонента. Мне необходимо передать этот id в запрос к GraphQL и, соответственно, получить информацию об этом товаре.

Вот код запроса в Queries.js:

import {gql} from '@apollo/client';

export const CHOOSE_PRODUCT = gql`
    query{
        product(id:"huarache-x-stussy-le"){
            name
            description
        }
    }
`

И вот так передаю его в Product.js:

import { useQuery} from "@apollo/client"
import {CHOOSE_PRODUCT} from "../graphql/Queries"

export default function Product(){

    const {data} = useQuery(CHOOSE_PRODUCT)

    if(data){
        console.log(data)
    }

Я пробовал некоторые варианты передачи значения, но пока ничего не получилось. Как решить?

Answer 1

[HealSpirit]

import { gql } from "@apollo/client";

export const getChooseProductQuery = (id) => gql`
  query {
    product(id: ${id}) {
      name
      description
    }
  }
`;

import { useQuery } from "@apollo/client";
import { getChooseProductQuery  } from "../graphql/Queries";

export default function Product(props) {
  const { id } = props;
  const { data } = useQuery(getChooseProductQuery(id));

  if (data) {
    console.log(data);
  }
}

Так не пойдет?