T
TanStack•2y ago
fair-rose

How to show loading state only when specific param change

i am using a useInfiniteQuery in trpc. They query has the params similar to 
{
        cursor: z.number(),
        pageSize: z.number().min(1),
        startDate: z.date().optional(),
        endDate: z.date().optional(),
        searchTerm: z.string().optional(),
}
{
        cursor: z.number(),
        pageSize: z.number().min(1),
        startDate: z.date().optional(),
        endDate: z.date().optional(),
        searchTerm: z.string().optional(),
}
So when using in frontend i have a state like below 
const [search, setSearch] = useState('');
const [search, setSearch] = useState('');
which set by a search input and the query is used like 
  const { data, isLoading, fetchNextPage, fetchPreviousPage } =
    api.affiliate.getAll.useInfiniteQuery(
      {
        pageSize: 10,
        searchTerm: search,
      },
      {
        getNextPageParam: {some code here}
        initialCursor: 0,
      },
    );
  const { data, isLoading, fetchNextPage, fetchPreviousPage } =
    api.affiliate.getAll.useInfiniteQuery(
      {
        pageSize: 10,
        searchTerm: search,
      },
      {
        getNextPageParam: {some code here}
        initialCursor: 0,
      },
    );
Is there a way to have a loading state specific to when only the search param changes which i will show in the input and a global loading state which will be used to show the skeleton of a table
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?