next-fetcher is a powerful, TypeScript-friendly utility for seamless data fetching in Next.js app router. It leverages Axios for HTTP requests, supports customizable request configurations, and provides robust error handling with optional .throwOnError() chaining. Simplify your client and server-side data fetching workflows with next-fetcher.
** This utility only for nextjs app router. Page router do not support this package.
- Small in Size
- All functionality
- Zero config
- Properly Maintained
$ npm i next-fetcherimport { createServerFetcher } from "next-fetcher";
const Page = async () => {
const fetcher = createServerFetcher({ next: true, sessionName: "token" });
//It can be called outside of component.
//On that case you can import fetcher for use it in your component.
const data = await fetcher.get("/api");
return (
<div>
{JSON.stringify(data)}
</div>
);
};
export default Page;| Name | Types | Default | Description |
|---|---|---|---|
| next | Boolean (Required) | Give `true` if you are using nextjs api. If you are using non-nextjs api then give this value as `false`. | |
| baseURL | string (Required if `next` is `false`) | Give the base url if you are not using nextjs api. | |
| sessionName | string (Required if you do not provide `cookie`) | The cookie name which one need to be sent for authorization | |
| cookie | string (Required if you do not provide `sessionName`) | If you want to you can directly provide the cookie value | |
| sessionOptions | Options (Optional) | Cookie options |
import { createClientFetcher, Fetcher } from "next-fetcher";
import { useQuery } from "@tanstack/react-query";
const GET_BOOKS = async(fetcher: Fetcher)=> {
return fetcher.get("/api")
}
const Page = () => {
const fetcher = createClientFetcher({ next: true, sessionName: "token" });
//It can be called outside of component.
//On that case you can import fetcher for use it in your component.
//Using tanstack/react-query
const { data } = useQuery({ queryKey: ["books"], queryFn: () => GET_BOOKS(fetcher) })
return (
<div>
{JSON.stringify(data)}
</div>
);
};
export default Page;| Name | Types | Default | Description |
|---|---|---|---|
| next | Boolean (Required) | Give `true` if you are using nextjs api. If you are using non-nextjs api then give this value as `false`. | |
| baseURL | string (Required if `next` is `false`) | Give the base url if you are not using nextjs api. | |
| sessionName | string (Required if you do not provide `cookie`) | The cookie name which one need to be sent for authorization | |
| cookie | string (Required if you do not provide `sessionName`) | If you want to you can directly provide the cookie value | |
| sessionOptions | Options (Optional) | Cookie options |
next-fetcher do not throwing any error during data fetching. But if you want to throw error you can use throwOnError() chaining method.
-Example-
fetcher.get("/api").throwOnError();
fetcher.post("/api").throwOnError();
fetcher.put("/api").throwOnError();
fetcher.delete("/api").throwOnError();next-fetcher is typescript friendly. You can declare your response type like-
fetcher.get<data:any>("/api").throwOnError();
fetcher.post<{message:string}>("/api").throwOnError();
fetcher.put<{message:string}>("/api").throwOnError();
fetcher.delete<{message:string}>("/api").throwOnError();next-fetcher support cookie management system. You can add cookie or delete cookie using next-fetcher utility function.
import { addSession, deleteSession } from "next-fetcher";
//Add session (Adding cookie)
addSession('key', 'value', options);
//Delete Session (Removing cookie)
deleteSession('key', options);NOTE! When deleting a cookie and you're not relying on the default attributes, you must pass the exact same path and domain attributes that were used to set the cookie:
deleteSession('key', { path: '/path', domain: '.yourdomain.com' });| Name | Description |
|---|---|
| key | Cookie's name |
| value | Cookie's value |
| options | Cookie's options like- `req`, `res`, `cookies`, `domain`, `encode`, `expires`, `httpOnly`, `maxAge`, and `path` |
- Author - Siam Ahnaf
- Website - https://www.siamahnaf.com/
- Twitter - https://twitter.com/siamahnaf198
- Github - https://github.com/siamahnaf
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent