use this tag for questions related to https://github.com/tanstack/query
tanstackreact query is async state management for JS/TS and related frameworks. For more details please check here
Questions tagged [tanstackreact-query]
72 questions
1
vote
0 answers
react pagination using tanstack react query, buttons are not working
I am using jsonplaceholder api and trying to fetch results on different pages, for that I am
using tanstack react query, however my buttons seem to not work? Can somebody please guide me in
the right direction?
I am having a page hook and on…
web_dev
- 11
- 3
1
vote
1 answer
Cancelling a query in tansktack query according to network connection
I'm attempting to cancel a query in react tansktack query. I have a hook that detects if the user is offline or online. When the user is offline I want to immediatlly cancel the query to show some offline downloaded data. I have attempted to do so…
Nilton Schumacher F
- 814
- 3
- 13
- 43
1
vote
3 answers
React Query refetching data when changing routes in nextjs
I am using @tanstack/react-query": "^4.26.0" in my "next": "13.2.1", project. I have a query which triggers on the index page.
GiveawayDetailsQuery-
export const useGiveawayDetails = () => useQuery(["giveawayDetails"], async () => {
const…
Bilal Mohammad
- 129
- 1
- 13
0
votes
1 answer
How to pass a custom parameter in useInfinityQuery using the React Query library?
I need to provide a parameter for the function call within useInfinityQuery, where this parameter will hold a value used for filtering in the request URL parameters.
My parameter is named "search_query."
export function useGetCustomers() {
async…
LayTexas
- 545
- 2
- 6
- 19
0
votes
1 answer
tanstack table rendering image along name
I am using TanStack table in nextJS (react).
I want to have this behavior:
but in the tutorial it says
const columns = React.useMemo(() => [
{
Header: "Name",
accessor: "name",
Cell: AvatarCell,
imgAccessor: "imgUrl",
…
steve123
- 31
- 3
0
votes
1 answer
React query hook useQuery not working with object parameters
I am currently working on a React project and facing issues when using the useQuery hook from react-query.
Here's what my code looks like:
import React from "react";
import Header from "./components/Header";
import SearchInput from…
Sankalp Singha
- 4,461
- 5
- 39
- 58
0
votes
1 answer
How do I pass the params to the react query using hooks
I am trying to pass the params to the react query through the hook.
export const useUserInfo = (enabled, {token}) => {
return useQuery(
["users-info", token],
() => fetchUserInfo(token),
{
enabled: enabled,
},
);
};
const…
ganesh kaspate
- 1
- 9
- 41
- 88
0
votes
1 answer
Waiting for useMutation status to show a modal based on error
I'm using t3stack for my project (tailwind - typescipt- tRPC)
to use an api. in this app you do this for Example :
const apiResult = api.story.generateStory.useMutation();
no need to pass any function or key.
and to trigger this…
IsoW
- 129
- 2
- 15
0
votes
0 answers
Is it problematic for a React hook to return an object with chained methods?
TL;DR; Totally contrived example. Is there anything wrong with doing this?
const useHookWithChainedMethods = () => {
const _internal = { foo: 'FOO' };
const self = {
getFoo: () => _internal.foo,
setFoo: (foo) => {
_internal.foo =…
Seth Bro
- 2,537
- 3
- 19
- 15
0
votes
2 answers
Can react-query make sequential network calls and wait for previous one to finish?
In the following code for example, how can I update react-query to wait for the previous call to be complete before starting the next one?
I'm trying to hit an API that has rate limiting to one call at a time but I have a list of calls I need to…
SpaceOso
- 358
- 1
- 3
- 15
0
votes
2 answers
React query and mixed bulk / specific queries
In a large project, we have both a bulk and a specific "details" query like:
dataBulk_Get(subjectIds: string[]): DataDto[]
and
dataSingle_Get(subjectId: string): DataDto
The most simple solution would to have two queries, with two distinct query…
TBowmo
- 75
- 1
- 11
0
votes
1 answer
react query .isSuccess throws errors when I make an axios get
const searchInvoiceList = async (
plantLoc: string,
invoiceOption: string
) => {
let data: InvoiceData[] = [];
await axios
.get(`${linkURL}inv/getControlList/${plantLoc}/${invoiceOption}`)
.then((response) => {
data =…
Zach philipp
- 125
- 6
0
votes
1 answer
MUI DataGrid only showing one row when paginating results
I'm using MUI V5 and Tanstack React Query V4
I'm trying to use pagination on my Datagrid component and when the page initially loads, it fetches and loads the grid fine as expected. The problem is introduced when I click to go to the next page of my…
Veronica Canido
- 29
- 4
0
votes
1 answer
Invalidate queries doesn't work when user navigates via NextJS routes
In my NextJS app, user has an opportunity to view the list and to add data there.
When user adds the item to the list, its query is invalidated with queryClient.invalidateQueries({ queryKey: ['branchList'] });.
However, when user navigates back to…
N.K.
- 301
- 1
- 8
0
votes
0 answers
How to force mutation sync with React Query
I am using React Query with a query persistor to give an app offline capabilities. This is working great, if offline the mutation will be persisted to local storage and as soon as the network is online again the mutation(s) will post to the api.
I…
Pedro
- 1,148
- 4
- 16
- 35