How to pass variables to GraphQL query in React components?

Question

React

Good afternoon. I have a Product component that receives an item id from another component. I need to pass this id to the request to GraphQL and, accordingly, get information about this product.

Here is the request code in Queries.js:

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

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

And this is how I pass it to 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)
    }

I've tried some options for passing the value, but nothing has worked so far. How to decide?

Answer 1

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);
  }
}

This will not work?

Answer 2

No, it didn't.