harsh-harlequin

How to trigger query in one component and view it in another?

I have a component that has a dropdown that when summited should trigger a query, I put the query in a custom hook like

import { useQuery } from "@tanstack/react-query";
import { PublicUserTypeArray } from "@/types/types";

const fetchPosts = async (postIds: number[]): Promise<PublicUserTypeArray> => {
  const response = await fetch("api/posts", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(postIds),
  });

  if (!response.ok) {
    throw new Error("Failed to fetch");
  }

  return response.json();
};

export const usePostQuery = (array: number[]) => {
  return useQuery({
    queryKey: ["fetchPosts"],
    queryFn: () => fetchPosts(array),
  });
};

import { useQuery } from "@tanstack/react-query";
import { PublicUserTypeArray } from "@/types/types";

const fetchPosts = async (postIds: number[]): Promise<PublicUserTypeArray> => {
  const response = await fetch("api/posts", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(postIds),
  });

  if (!response.ok) {
    throw new Error("Failed to fetch");
  }

  return response.json();
};

export const usePostQuery = (array: number[]) => {
  return useQuery({
    queryKey: ["fetchPosts"],
    queryFn: () => fetchPosts(array),
  });
};

how should I go about making that on click it passes array to hook and runs query and then in other component have accesses to the isPending, data... ?

8 Replies

mute-gold•2y ago

queryClient.ensureQueryData

harsh-harlequinOP•2y ago

this doesn't have access to data, isPending, isError... and if in the component consuming the data doesn't have the array then I cant call the function

mute-gold•2y ago

Then explain your use case. A drop-down that triggers a query on select brings no user value. Why would you want that?

harsh-harlequinOP•2y ago

i have a dropdown that a user can filter through options and then when they click submit it fetches the posts related to the options chosen, the posts get rendered in a different component. i would like to have access to the post fetching data so that i can render loading, data etc. (possibly later add infinite scroll ) so how do i access the state of that fetch i don't have the ids from the dropdown at the time when the user clicks submit (should i be structuring my components differently or should i be using a mutation... I'm new to use query)

mute-gold•2y ago

The drop-down changes client state. You can manage this with jotai or Zustand etc. your query is dependent on this client state. Call this query in your drop-down component to get the status and in your list to render the posts

harsh-harlequinOP•2y ago

so if i understand you correctly use jotai or Zustand etc. to make the selected ids global and then call the query again using the ids to get the cached data for posts?

mute-gold•2y ago

Yes And the ids must be in the query key!!

harsh-harlequinOP•2y ago

ok, thank you so much!

Gaming

Programming

How to trigger query in one component and view it in another?

Did you find this page helpful?