0

I am using react query to fetch data from API. I want to fetch a single product data, and render a component with its data. The problem is that the react query ist working at all. Help me please.

This is the react query ...what is wrong here can anyone help.

export async function fetchProductById(id) {
  return fetch(`https://fakestoreapi.com/products/${id}`).then((response) =>
    response.json()
  );  
}

export function useProduct({id}) {
  return useQuery({
    queryKey: ["products", id],
    queryFn: () => fetchProductById(id),
  });
}

In my component:

In my component: 
import React from 'react'
import { useParams } from "react-router-dom";
import { useProduct } from '../fetch/api';

const ProductDescription = () => {
    const { id } = useParams();
   const {data} = useProduct(id);
    console.log(data);
Hemant Khatiwada
  • 1

1 Answers1

1

It looks like there may be a problem with how you are calling the useProduct hook in your ProductDescription component. The useProduct hook expects an object with an id property as its argument, but in the ProductDescription component, you are passing id directly as an argument.

You could make this small change to the ProductDescription component to correctly call the useProduct hook:

 const { id } = useParams();
 const { data } = useProduct({ id }); //change is here
 console.log(data);
Fortun
  • 37
  • 3