stormy-gold

Is there any up-to-date example of using data loaders?

I can see new Route() don't have loader property anymore, and useLoader hook as well.

10 Replies

foreign-sapphire•3y ago

if you're using beta.83 i can help you with it but there are no examples atm

stormy-goldOP•3y ago

Thank you @Bachitter Is it the latest concept (/API) of router loaders? router/examples/react/kitchen-sink-single-file/src/main.tsx Do you think It's going to change anytime soon?

foreign-sapphire•3y ago

in beta 83 loaders funcs are onLoad and it will be changed soon back to loaders all the examples are what router will be in future

correct-apricot•3y ago

@Bachitter If I've setup the QueryClientProvider in a Main.tsx file and I'm setting up the routes in App.tsx How do i get access to this queryClient object like in this example?https://github.com/TanStack/router/blob/f610ec57e41e928cc1d2c133702990172e528381/examples/react/with-react-query/src/main.tsx#L76

import { StrictMode } from 'react';
import ReactDOM from 'react-dom/client';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import App from './App.tsx';

import 'bootstrap/dist/css/bootstrap.min.css';

const queryClient = new QueryClient();

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </StrictMode>
);

import { StrictMode } from 'react';
import ReactDOM from 'react-dom/client';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import App from './App.tsx';

import 'bootstrap/dist/css/bootstrap.min.css';

const queryClient = new QueryClient();

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </StrictMode>
);

const rootRoute = new RootRoute();

const indexRoute = new Route({
  getParentRoute: () => rootRoute,
  path: '/',
  component: Guide,
  loader: async () => {
    const queryClient = useQueryClient();
    await queryClient.ensureQueryData({
      queryKey: ['guide'],
      queryFn: getfilms,
    });
  },
});
const routeTree = rootRoute.addChildren([indexRoute]);

const router = new Router({
  routeTree,
});

declare module '@tanstack/router' {
  interface Register {
    router: typeof router;
  }
}

function App() {
  return (
    <>
      <RouterProvider router={router} />
    </>
  );
}

export default App;

const rootRoute = new RootRoute();

const indexRoute = new Route({
  getParentRoute: () => rootRoute,
  path: '/',
  component: Guide,
  loader: async () => {
    const queryClient = useQueryClient();
    await queryClient.ensureQueryData({
      queryKey: ['guide'],
      queryFn: getfilms,
    });
  },
});
const routeTree = rootRoute.addChildren([indexRoute]);

const router = new Router({
  routeTree,
});

declare module '@tanstack/router' {
  interface Register {
    router: typeof router;
  }
}

function App() {
  return (
    <>
      <RouterProvider router={router} />
    </>
  );
}

export default App;

// api/films.ts
import axios from 'axios';

export async function getfilms() {
  return axios.get('http://localhost:8080/get-films').then((res) => res.data);
}

// api/films.ts
import axios from 'axios';

export async function getfilms() {
  return axios.get('http://localhost:8080/get-films').then((res) => res.data);
}

I get an invalid hook call error Invalid hook call. if I try to access it this way. Could you help please?

foreign-sapphire•3y ago

export query client from main.tsx and add to context in router you can use it wherever you want https://github.com/bachiitter/bachitter.dev/blob/main/src/client/router.tsx

correct-apricot•3y ago

Oh right thank you so do I pass it on as a prop to the queryclientProvider? That link doesn't seem to work

foreign-sapphire•3y ago

yes will need to pass it to provider too my bad just a sec gonna share ss

foreign-sapphire•3y ago

foreign-sapphire•3y ago

correct-apricot•3y ago

Ahhh I'll give that a shot! Really appreciate the help

Gaming

Programming

Is there any up-to-date example of using data loaders?

Did you find this page helpful?