10 replies

How to use useQuery...?

Uber noob question here, I seem to have a misunderstanding of useQuery. Here is all im trying to do - use it to return an array from my database, console log the data.

Here is my component, when it loads it doesn't log anything (because getAllCars.data hasn't resolved yet?), as if I need to await the data (what is the pattern for this in TRPC?). If I wasn't using TRPC, I would have the cars data set to a state so I can put the loop inside a useEffect with cars state as a dependancy, however I understand the TRPC patterns are different. Looking at the useQuery docs, the useQuery example doesn't help. The data just seems to be there?

Anyway the solution is presumably. very simple, hoping someone can point me in the right direction

const AddPart: React.FC<AddPartProps> = () => {

  const getAllCars = trpc.cars.getAll.useQuery();
  const savePart = trpc.parts.createPart.useMutation();

  useEffect(() => {
    getAllCars.data?.forEach((car: ICar) => {
      console.log(car.make)
    });

  }, []);


  return (
      <div>Test</div>
  )
    export default AddPart

const AddPart: React.FC<AddPartProps> = () => {

  const getAllCars = trpc.cars.getAll.useQuery();
  const savePart = trpc.parts.createPart.useMutation();

  useEffect(() => {
    getAllCars.data?.forEach((car: ICar) => {
      console.log(car.make)
    });

  }, []);


  return (
      <div>Test</div>
  )
    export default AddPart

TTC

Theo's Typesafe Cult•4y ago•

10 replies

codythatsme

How to use useQuery...?

const AddPart: React.FC<AddPartProps> = () => {

  const getAllCars = trpc.cars.getAll.useQuery();
  const savePart = trpc.parts.createPart.useMutation();

  useEffect(() => {
    getAllCars.data?.forEach((car: ICar) => {
      console.log(car.make)
    });

  }, []);


  return (
      <div>Test</div>
  )
    export default AddPart

const AddPart: React.FC<AddPartProps> = () => {

  const getAllCars = trpc.cars.getAll.useQuery();
  const savePart = trpc.parts.createPart.useMutation();

  useEffect(() => {
    getAllCars.data?.forEach((car: ICar) => {
      console.log(car.make)
    });

  }, []);


  return (
      <div>Test</div>
  )
    export default AddPart

How to use useQuery...?

Similar Threads

How to use useQuery...?

Similar Threads

Similar Threads

Similar Threads