{"id":21646588,"url":"https://github.com/skn437/skn-next-query","last_synced_at":"2026-01-05T15:46:23.565Z","repository":{"id":244390784,"uuid":"815116710","full_name":"skn437/skn-next-query","owner":"skn437","description":"A Simple React Query Type Extension \u0026 Client Library For Next.js 14","archived":false,"fork":false,"pushed_at":"2024-09-16T08:51:34.000Z","size":118,"stargazers_count":1,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-06T17:03:54.636Z","etag":null,"topics":["bun","library","nextjs","nodejs","npm","query","react"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/skn437.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-14T11:42:16.000Z","updated_at":"2024-08-18T19:45:49.000Z","dependencies_parsed_at":"2024-06-14T12:42:10.888Z","dependency_job_id":"6d6f6a11-66e7-4950-9f50-8cc376f56f48","html_url":"https://github.com/skn437/skn-next-query","commit_stats":null,"previous_names":["skn437/skn-next-query"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/skn437/skn-next-query","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skn437%2Fskn-next-query","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skn437%2Fskn-next-query/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skn437%2Fskn-next-query/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skn437%2Fskn-next-query/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/skn437","download_url":"https://codeload.github.com/skn437/skn-next-query/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skn437%2Fskn-next-query/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265645285,"owners_count":23804183,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bun","library","nextjs","nodejs","npm","query","react"],"created_at":"2024-11-25T06:45:43.354Z","updated_at":"2026-01-05T15:46:23.524Z","avatar_url":"https://github.com/skn437.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SKN React Query Type Extension \u0026 Client Library\n\n\u003cimg width=\"150px\" src=\"https://firebasestorage.googleapis.com/v0/b/skn-ultimate-project-la437.appspot.com/o/GitHub%20Library%2F12-TypeScript-SNQ.svg?alt=media\u0026token=45ad0ccf-c07a-4a24-a1e1-70c0f3a00239\" alt=\"next-query\" /\u003e\n\n\u003e TypeScript Next.js\n\n[![NPM Version](https://img.shields.io/npm/v/%40best-skn%2Fnext-query)](https://www.npmjs.com/package/@best-skn/next-query) [![MIT License](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/license/mit)\n\n\u0026nbsp;\n\n## **_Introduction:_**\n\n### A simple react query type extension \u0026 client library for Next.js 14\n\n### 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\n\n\u0026nbsp;\n\n## **_Details:_**\n\n### **`getQueryClient` function**\n\n- It creates a query client with proper server \u0026 client configurations\n- It has all the configurations to handle `Next.js streaming` in `loading.tsx ✅`\n- This function can be used in both react server \u0026 client components in Next.js\n- It is created as the instruction given in the\n  official [Tanstack React Query](https://tanstack.com/query/v5/docs/framework/react/guides/advanced-ssr) documentation\n  for Next.js\n  SSR\n- For usage instruction, see `Usage` section\n\n### **`QueryHydrationProps` Type**\n\n- The interface of props for React Server Component as data hydrator from server to client in Next.js\n- It has `children`, `queryKey` \u0026 `queryFn` properties\n- This interface is intended to be used in server side only i.e. only inside server components\n- The data hydrator component will hold a react client component as child where the data will be re-fetched\n- Inside the child component, use `useSuspenseQuery ✅` instead of `useQuery ❌`\n- For usage instruction, see `Usage` section\n\n\u0026nbsp;\n\n## **_Use Case:_**\n\n- Next.js\n\n\u0026nbsp;\n\n## **_Requirements:_**\n\n### This library has peer dependency for React \u0026 React DOM of minimum 18.3.1. It may or may not work on 19.x\n\n### This library also has peer dependency for Tanstack React Query of minimum 5.45.0. It may or may not work on 6.x\n\n### This library is intended to be used in Next.js of minimum 14.2.3. It may or may not work on 15.x\n\n### It also has peer dependency for Best SKN React Types of minimum 1.1.1\n\n- 💀 Minimum [react](https://www.npmjs.com/package/react) Version: `18.3.1`\n- 💀 Minimum [@types/react](https://www.npmjs.com/package/@types/react) Version: `18.3.3`\n- 💀 Minimum [react-dom](https://www.npmjs.com/package/react-dom) Version: `18.3.1`\n- 💀 Minimum [@types/react-dom](https://www.npmjs.com/package/@types/react-dom) Version: `18.3.0`\n- 💀 Minimum [next](https://www.npmjs.com/package/next) Version: `14.2.3`\n- 💀 Minimum [react query](https://www.npmjs.com/package/@tanstack/react-query) Version: `5.45.0`\n- 💀 Minimum [@best-skn/react-types](https://www.npmjs.com/package/@best-skn/react-types) Version: `1.1.1`\n\n\u0026nbsp;\n\n## **_Complementary Libraries:_**\n\n- [@best-skn/react-types](https://www.npmjs.com/package/@best-skn/react-types)\n- [@best-skn/next-types](https://www.npmjs.com/package/@best-skn/next-types)\n\n\u0026nbsp;\n\n## **_Usage:_**\n\n### To install the package, type the following in console\n\n\u003e ```zsh\n\u003e npm add @best-skn/next-query\n\u003e #or\n\u003e yarn add @best-skn/next-query\n\u003e #or\n\u003e pnpm add @best-skn/next-query\n\u003e #or\n\u003e bun add @best-skn/next-query\n\u003e ```\n\n### Create a directory called `types` in the root location of your project, and create a file called `query.d.ts`, then do this\n\n\u003e ```typescript\n\u003e import \"@best-skn/next-query/types\";\n\u003e ```\n\n### Check your `tsconfig.json`, if `includes` property has `**/*.ts` \u0026 `**/*.tsx` or not otherwise the type definition file may not work\n\n### Now Inside your Next.js 14 Project, use the package like this (Just an example)\n\n#### **_Create `React Query` Context:_**\n\n\u003e ```typescript jsx\n\u003e // * Client side context example in Next.js\n\u003e // * Location: `app/layout.tsx`\n\u003e import { QueryClientProvider } from \"@tanstack/react-query\";\n\u003e import { getQueryClient } from \"@best-skn/next-query\";\n\u003e\n\u003e // * `React.SLC` type comes from another package `@best-skn/react-types`\n\u003e const RootLayout: React.SLC = (props) =\u003e {\n\u003e   const { children } = props;\n\u003e\n\u003e   const queryClient: QueryClient = getQueryClient();\n\u003e\n\u003e   return (\n\u003e     \u003chtml lang=\"en\"\u003e\n\u003e       \u003cbody\u003e\n\u003e         \u003cQueryClientProvider client={queryClient}\u003e{children}\u003c/QueryClientProvider\u003e\n\u003e       \u003c/body\u003e\n\u003e     \u003c/html\u003e\n\u003e   );\n\u003e };\n\u003e\n\u003e export default RootLayout;\n\u003e ```\n\n#### **_Create `ReactQueryHydration` Component:_**\n\n##### (1) Next.js Server Component for Query Hydration\n\n\u003e ```typescript jsx\n\u003e //* Create a reusable server component in somewhere like `./src/lib/query`\n\u003e import { dehydrate, HydrationBoundary, type QueryHydrationProps } from \"@tanstack/react-query\";\n\u003e import { getQueryClient } from \"@best-skn/next-query\";\n\u003e\n\u003e // * `React.SFC` type comes from another package `@best-skn/react-types`\n\u003e const ReactQueryHydration: React.SFC\u003cQueryHydrationProps\u003e = (props) =\u003e {\n\u003e   const { children, queryKey, queryFn } = props;\n\u003e\n\u003e   const queryClient = getQueryClient();\n\u003e\n\u003e   queryClient.prefetchQuery({\n\u003e     queryKey,\n\u003e     queryFn,\n\u003e   });\n\u003e\n\u003e   return \u003cHydrationBoundary state={dehydrate(queryClient)}\u003e{children}\u003c/HydrationBoundary\u003e;\n\u003e };\n\u003e\n\u003e export default ReactQueryHydration;\n\u003e ```\n\n##### (2) Next.js Page\n\n\u003e ```typescript jsx\n\u003e //* Next.js `page.tsx`\n\u003e import ReactQueryHydration from \"@/lib/query/ReactQueryHydration\";\n\u003e import UserPageComponent from \"./UserPageComponent\"; // location where the component is\n\u003e import { getUserData } from \"./getUserData\";\n\u003e\n\u003e //* You don't need to use async/await here as `ReactQueryHydration` will handle all\n\u003e const Users: React.SFC\u003cunknown\u003e = () =\u003e {\n\u003e   return (\n\u003e     \u003cReactQueryHydration\n\u003e       queryKey={[\"users\"]} // the query id\n\u003e       queryFn={getUserData} // the query function that fetches data\n\u003e     \u003e\n\u003e       \u003cUserPageComponent /\u003e\n\u003e     \u003c/ReactQueryHydration\u003e\n\u003e   );\n\u003e };\n\u003e\n\u003e export default Users;\n\u003e ```\n\n##### (3) Child Component of the Next.js Page\n\n\u003e ```typescript jsx\n\u003e //* The child component\n\u003e \"use client\";\n\u003e\n\u003e //* Imports here\n\u003e\n\u003e const UserPageComponent: React.FC\u003cunknown\u003e = () =\u003e {\n\u003e   const { data } = useSuspenseQuery({\n\u003e     queryKey: [\"users\"],\n\u003e     queryFn: getUserData,\n\u003e   });\n\u003e\n\u003e   //* some codes here...\n\u003e };\n\u003e\n\u003e export default UserPageComponent;\n\u003e ```\n\n\u0026nbsp;\n\n## **_Dedicated To:_**\n\n- 👩‍⚕️`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: `世界は残酷だ それでも君を愛すよ`\n- 💯`My Parents`: The greatest treasures of my life ever.\n\n\u0026nbsp;\n\n## **_License:_**\n\nCopyright (C) 2024 SKN Shukhan\n\nLicensed under the MIT License\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskn437%2Fskn-next-query","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fskn437%2Fskn-next-query","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskn437%2Fskn-next-query/lists"}