@best-skn/next-query NPM

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 in loading.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 of useQuery ❌
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.