@best-skn/next-query
v1.0.9
Published
A Simple React Query Type Extension & Client Library For Next.js 14
Downloads
58
Readme
SKN React Query Type Extension & Client Library
TypeScript Next.js
Introduction:
A simple react query type extension & client library for Next.js 14
I made this library so that I can use it in all of my Next.js 14 projects without writing the same codes over and over again
Details:
getQueryClient
function
- It creates a query client with proper server & client configurations
- It has all the configurations to handle
Next.js streaming
inloading.tsx ✅
- This function can be used in both react server & client components in Next.js
- It is created as the instruction given in the official Tanstack React Query documentation for Next.js SSR
- For usage instruction, see
Usage
section
QueryHydrationProps
Type
- The interface of props for React Server Component as data hydrator from server to client in Next.js
- It has
children
,queryKey
&queryFn
properties - This interface is intended to be used in server side only i.e. only inside server components
- The data hydrator component will hold a react client component as child where the data will be re-fetched
- Inside the child component, use
useSuspenseQuery ✅
instead ofuseQuery ❌
- For usage instruction, see
Usage
section
Use Case:
- Next.js
Requirements:
This library has peer dependency for React & React DOM of minimum 18.3.1. It may or may not work on 19.x
This library also has peer dependency for Tanstack React Query of minimum 5.45.0. It may or may not work on 6.x
This library is intended to be used in Next.js of minimum 14.2.3. It may or may not work on 15.x
It also has peer dependency for Best SKN React Types of minimum 1.1.1
- 💀 Minimum react Version:
18.3.1
- 💀 Minimum @types/react Version:
18.3.3
- 💀 Minimum react-dom Version:
18.3.1
- 💀 Minimum @types/react-dom Version:
18.3.0
- 💀 Minimum next Version:
14.2.3
- 💀 Minimum react query Version:
5.45.0
- 💀 Minimum @best-skn/react-types Version:
1.1.1
Complementary Libraries:
Usage:
To install the package, type the following in console
npm add @best-skn/next-query #or yarn add @best-skn/next-query #or pnpm add @best-skn/next-query #or bun add @best-skn/next-query
Create a directory called types
in the root location of your project, and create a file called query.d.ts
, then do this
import "@best-skn/next-query/types";
Check your tsconfig.json
, if includes
property has **/*.ts
& **/*.tsx
or not otherwise the type definition file may not work
Now Inside your Next.js 14 Project, use the package like this (Just an example)
Create React Query
Context:
// * Client side context example in Next.js // * Location: `app/layout.tsx` import { QueryClientProvider } from "@tanstack/react-query"; import { getQueryClient } from "@best-skn/next-query"; // * `React.SLC` type comes from another package `@best-skn/react-types` const RootLayout: React.SLC = (props) => { const { children } = props; const queryClient: QueryClient = getQueryClient(); return ( <html lang="en"> <body> <QueryClientProvider client={queryClient}>{children}</QueryClientProvider> </body> </html> ); }; export default RootLayout;
Create ReactQueryHydration
Component:
(1) Next.js Server Component for Query Hydration
//* Create a reusable server component in somewhere like `./src/lib/query` import { dehydrate, HydrationBoundary, type QueryHydrationProps } from "@tanstack/react-query"; import { getQueryClient } from "@best-skn/next-query"; // * `React.SFC` type comes from another package `@best-skn/react-types` const ReactQueryHydration: React.SFC<QueryHydrationProps> = (props) => { const { children, queryKey, queryFn } = props; const queryClient = getQueryClient(); queryClient.prefetchQuery({ queryKey, queryFn, }); return <HydrationBoundary state={dehydrate(queryClient)}>{children}</HydrationBoundary>; }; export default ReactQueryHydration;
(2) Next.js Page
//* Next.js `page.tsx` import ReactQueryHydration from "@/lib/query/ReactQueryHydration"; import UserPageComponent from "./UserPageComponent"; // location where the component is import { getUserData } from "./getUserData"; //* You don't need to use async/await here as `ReactQueryHydration` will handle all const Users: React.SFC<unknown> = () => { return ( <ReactQueryHydration queryKey={["users"]} // the query id queryFn={getUserData} // the query function that fetches data > <UserPageComponent /> </ReactQueryHydration> ); }; export default Users;
(3) Child Component of the Next.js Page
//* The child component "use client"; //* Imports here const UserPageComponent: React.FC<unknown> = () => { const { data } = useSuspenseQuery({ queryKey: ["users"], queryFn: getUserData, }); //* some codes here... }; export default UserPageComponent;
Dedicated To:
- 👩⚕️
Tanjila Hasan Trina
: The long lost love of my life. The course of nature separated us from our paths and put us in separate places far away from each other. But no matter how separated we are right now, each and every moment of mine is only dedicated to you. We may not see each other in this lifetime as it seems but I will find you again in the next life. I just want to say:世界は残酷だ それでも君を愛すよ
- 💯
My Parents
: The greatest treasures of my life ever.
License:
Copyright (C) 2024 SKN Shukhan
Licensed under the MIT License