phonzammi/vike-react-tanstack-query

Integration of vike (without builtin renderer) and tanstack-query v5

Integration of Vike (without builtin renderer) with Tanstack Query v5

This is an example of integrating Vike with Tanstack-Query.

Special thanks to brillout and AurelienLourot for the discussion :

• https://github.com/vikejs/vike-react/discussions/30

To run this example:

git clone git@github.com:phonzammi/vike-react-tanstack-query
cd vike-react-tanstack-query/
# with pnpm
pnpm install
pnpm run dev
# or with npm
npm install
npm run dev

Fetching/Prefetching patterns :

1. Use global /renderer/onBeforeRender.tsx for simple or generic query.

• Prefetching with global onBeforeRender() can be apply to any page with a simple or generic query, e.g. prefetching all posts or movies, etc.
• Example : the posts/index/+prefetchQuery.ts exports the required query for posts/index/+Page.tsx, this query will be prefetched in the global onBeforeRender() (/renderer/+onBeforeRender.ts).

2. Use local onBeforeRender.tsx inside each pages for complex query.

• Fetching/Prefetching with local onBeforeRender() only apply to a page for complex query, e.g. depends on routeParams, filters, etc.
• Example: the /posts/@id/onBeforeRender.tsx to fetch/prefetch a single post for /posts/@id/+Page.tsx with id param.

This repo was modified from example react-full-v1

Note : This pattern can also be applied using builtin renderer from vike-react or scaffold with Bati.

Official documentations of Vike. vike.dev.