T
TanStack•2y ago
correct-apricot

How to run dynamic Query in Tanstack Query?

0 I've been having a rough time understanding tanstack/query. I'm trying to fetch data using tanstack. What I'm trying to get is store the data in my state, and then when I press the button, it will pass to my URL and then it will call the button. 
  const [data, setData] = useState({
    from: "",
    end: "",
    year: "",
    college: "",
    type: "",
  });

  const handleClick = () => {
    
  };
  const [data, setData] = useState({
    from: "",
    end: "",
    year: "",
    college: "",
    type: "",
  });

  const handleClick = () => {
    
  };
This is my sample URL. http://localhost:5000/api/result?from=8&end=10&year=23&college=CEIS&type=Students This is my apicall 
export const getUsers = async (from, end, year, college , type) => {
  try {
    const response = await axios.get(`http://localhost:5000/api/result?from=${from}&end=${end}&year=${year}&college=${college}&type=${type}`)
    return response.data;
  } catch (error) {
    // Handle errors here if needed
    throw error;
  }
};
export const getUsers = async (from, end, year, college , type) => {
  try {
    const response = await axios.get(`http://localhost:5000/api/result?from=${from}&end=${end}&year=${year}&college=${college}&type=${type}`)
    return response.data;
  } catch (error) {
    // Handle errors here if needed
    throw error;
  }
};
And this is my getResult 
export const resultQuery = () => {
  const {isPending, error, data ,isFetching} = useQuery({
    queryKey: ["users", data.from, data.end, data.year, data.college, data.type],
    queryFn:  () => getUsers(data.from, data.end, data.year, data.college, data.type)
  })

  return { isPending, error, data, isFetching };
}
export const resultQuery = () => {
  const {isPending, error, data ,isFetching} = useQuery({
    queryKey: ["users", data.from, data.end, data.year, data.college, data.type],
    queryFn:  () => getUsers(data.from, data.end, data.year, data.college, data.type)
  })

  return { isPending, error, data, isFetching };
}
So what i'm trying to do is only get the data once the button is click, is that possible in tanstack/react-query 5?
3 Replies
unwilling-turquoise
unwilling-turquoise•2y ago
You can pass enabled argument to the useQuery and query will make the req only when payload is there 
const {isPending, error, data ,isFetching} = useQuery({
    queryKey: ["users", data.from, data.end, data.year, data.college, data.type],
    queryFn:  () => getUsers(data.from, data.end, data.year, data.college, data.type)
    enabled: !!data.from && !!data.end && !! data.year && !!data.college && !!data.type
  })
const {isPending, error, data ,isFetching} = useQuery({
    queryKey: ["users", data.from, data.end, data.year, data.college, data.type],
    queryFn:  () => getUsers(data.from, data.end, data.year, data.college, data.type)
    enabled: !!data.from && !!data.end && !! data.year && !!data.college && !!data.type
  })
`
correct-apricot
correct-apricotOP•2y ago
Sorry for late reply, am I gonna put in on my handle click?
unwilling-turquoise
unwilling-turquoise•2y ago
@adxvcasas no in resultQuery function 
export const useUserQuery = () => {
    const userQuery = useQuery({
        queryKey: [
            'users',
            data.from,
            data.end,
            data.year,
            data.college,
            data.type,
        ],
        queryFn: () =>
            getUsers(data.from, data.end, data.year, data.college, data.type),
        enabled:
            !!data.from && !!data.end && !!data.year && !!data.college && !!data.type,
    })

    return userQuery
}
export const useUserQuery = () => {
    const userQuery = useQuery({
        queryKey: [
            'users',
            data.from,
            data.end,
            data.year,
            data.college,
            data.type,
        ],
        queryFn: () =>
            getUsers(data.from, data.end, data.year, data.college, data.type),
        enabled:
            !!data.from && !!data.end && !!data.year && !!data.college && !!data.type,
    })

    return userQuery
}
i usually convert it to customHook

Did you find this page helpful?