Knox Comments - Answer Overflow

Knox

Explore posts from servers

RReactiflux RRailway SSolidJS TTCTheo's Typesafe Cult

•Created by Knox on 5/8/2024 in #questions

Migrating react-query v3 to tanstack-query v4

I thought that was only on v5 since v4 migration guide only mentions:

;-useQuery('todos', fetchTodos) +
  useQuery(['todos'], fetchTodos)

;-useQuery('todos', fetchTodos) +
  useQuery(['todos'], fetchTodos)

:aPES_Think:

5 replies

TTCTheo's Typesafe Cult

•Created by Knox on 5/8/2024 in #questions

Migrating react-query v3 to tanstack-query v4

ohhhhhhh. Thank you so much for this :PES_Facepalm: Ive migrated another project from v4 to v5 and but on this project got so stuck on other problems that completely oversaw this. Thanks :prayge:

5 replies

TTCTheo's Typesafe Cult

•Created by Knox on 3/5/2024 in #questions

React query useInfiniteQuery (v3) and react table (v7) for server side pagination

im really blind on this

8 replies

TTCTheo's Typesafe Cult

•Created by Knox on 3/5/2024 in #questions

React query useInfiniteQuery (v3) and react table (v7) for server side pagination

And both the wrong way

8 replies

TTCTheo's Typesafe Cult

•Created by Knox on 3/5/2024 in #questions

React query useInfiniteQuery (v3) and react table (v7) for server side pagination

@dan https://stackoverflow.com/questions/78111466/implement-server-side-pagination-with-react-query-v3-and-react-table-v7 I posted here if you wanna take a look. I think I dont need useInfiniteQuery and what is happening now is that the built in pagination only shows when I manually change the state. The state paginator was built just for testing purposes, still unsure why the built in paginator doesn't show on page load. I feel I'm doing two different things here

8 replies

TTCTheo's Typesafe Cult

•Created by Knox on 3/5/2024 in #questions

React query useInfiniteQuery (v3) and react table (v7) for server side pagination

I think one of my problems is not being able to get the entire length of teh object if im calling it straight with limit and offser

const useDevices = <T = Device[]>(
  options?: UseQueryOptions<QueryResult, AxiosError, T>,
  page?: number,
  pageSize?: number
) => {
  const queryClient = useQueryClient()
  return useInfiniteQuery(
    ['devices', page, pageSize],
    async ({ pageParam = 1 }) => {
      const offset = (pageParam - 1) * pageSize 

      queryClient.cancelQueries('device')
      const { data } = await Axios.get<Device[]>(`devices?limit=${pageSize}&offset=${offset}`)
      return { data, pageParam: pageParam + 1 }
    },
    {
      getNextPageParam: lastPage => lastPage.pageParam,
      getPreviousPageParam: firstPage =>
        firstPage.pageParam > 1 ? firstPage.pageParam - 1 : undefined,

      keepPreviousData: true,
      refetchOnWindowFocus: false,
      staleTime: Infinity,
      ...options
    }
  )
}

const useDevices = <T = Device[]>(
  options?: UseQueryOptions<QueryResult, AxiosError, T>,
  page?: number,
  pageSize?: number
) => {
  const queryClient = useQueryClient()
  return useInfiniteQuery(
    ['devices', page, pageSize],
    async ({ pageParam = 1 }) => {
      const offset = (pageParam - 1) * pageSize 

      queryClient.cancelQueries('device')
      const { data } = await Axios.get<Device[]>(`devices?limit=${pageSize}&offset=${offset}`)
      return { data, pageParam: pageParam + 1 }
    },
    {
      getNextPageParam: lastPage => lastPage.pageParam,
      getPreviousPageParam: firstPage =>
        firstPage.pageParam > 1 ? firstPage.pageParam - 1 : undefined,

      keepPreviousData: true,
      refetchOnWindowFocus: false,
      staleTime: Infinity,
      ...options
    }
  )
}

I should probably slice it like in the example you provided. I need a break tbh

8 replies

TTCTheo's Typesafe Cult

•Created by Knox on 3/5/2024 in #questions

React query useInfiniteQuery (v3) and react table (v7) for server side pagination

Im using v7 but I see there is something like a prepareRow thing, so I wouldn't need to use useInfiniteQuery ? My head

8 replies

TTCTheo's Typesafe Cult

•Created by Knox on 2/26/2024 in #questions

Cancel query when query value reaches to 0

Anyone has a tip on how I can do this ? I feel I have done it and erased my implementation before when I tried to pass things as props. This is using react-query v3

3 replies

TTCTheo's Typesafe Cult

•Created by Knox on 12/20/2023 in #questions

Open id view content from Tanstack Table with Tanstack Router

Pathless route, damn. Let me try to implement somethings after lunch and see if it fixes or changes something

41 replies

TTCTheo's Typesafe Cult

•Created by Knox on 12/20/2023 in #questions

Open id view content from Tanstack Table with Tanstack Router

If I try to make something like

export const operationsRoute = new Route({
  getParentRoute: () => rootRoute,
  path: "operations",
  component: OperationSensors,
});

export default function OperationSensors() {
  return (
    <MapProvider>
      <TwoPaneLayout header={<Header />} left={<Table />} right={<Outlet />} />
      <Outlet />
    </MapProvider>
  );
}

export const operationsRoute = new Route({
  getParentRoute: () => rootRoute,
  path: "operations",
  component: OperationSensors,
});

export default function OperationSensors() {
  return (
    <MapProvider>
      <TwoPaneLayout header={<Header />} left={<Table />} right={<Outlet />} />
      <Outlet />
    </MapProvider>
  );
}

i'll get an error on the useQuery usage and const context = useRouteContext(routeOptions); etcetc

41 replies

TTCTheo's Typesafe Cult

•Created by Knox on 12/20/2023 in #questions

Open id view content from Tanstack Table with Tanstack Router

Everything is being rendered inside this <Outlet />

41 replies

TTCTheo's Typesafe Cult

•Created by Knox on 12/20/2023 in #questions

Open id view content from Tanstack Table with Tanstack Router

export const operationsRoute = new Route({
  getParentRoute: () => rootRoute,
  path: "operations",
  component: Chrome,
});

export default function Chrome() {
  return (
    <div
      style={{
        display: "grid",
        height: "100vh",
        gridTemplateAreas: "'header' 'content'",
        gridTemplateRows: "auto 1fr",
        gridTemplateColumns: "1fr",
      }}
    >
      <div
        style={{ gridArea: "header", borderBottom: "1px solid var(--gray-a5)" }}
      >
        <Header />
      </div>

      <div
        style={{
          gridArea: "content",
          overflow: "hidden",
        }}
      >
        <Outlet />
        <TanStackRouterDevtools />
      </div>
    </div>
  );
}

export const operationsRoute = new Route({
  getParentRoute: () => rootRoute,
  path: "operations",
  component: Chrome,
});

export default function Chrome() {
  return (
    <div
      style={{
        display: "grid",
        height: "100vh",
        gridTemplateAreas: "'header' 'content'",
        gridTemplateRows: "auto 1fr",
        gridTemplateColumns: "1fr",
      }}
    >
      <div
        style={{ gridArea: "header", borderBottom: "1px solid var(--gray-a5)" }}
      >
        <Header />
      </div>

      <div
        style={{
          gridArea: "content",
          overflow: "hidden",
        }}
      >
        <Outlet />
        <TanStackRouterDevtools />
      </div>
    </div>
  );
}