next-fetcher
v2.5.5
Published
A nextjs typescript friendly utility for seamless data fetching.
Downloads
19
Maintainers
Readme
Next Fetcher
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
Installation
$ npm i next-fetcher
Server Components
import { 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;
API (Server Components)
Client Components
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;
API (Client Components)
Error Handling
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();
Typescript Usage
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();
Cookie Management(Session)
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' });
API (Cookie Management)
Stay in touch
- Author - Siam Ahnaf
- Website - https://www.siamahnaf.com/
- Twitter - https://twitter.com/siamahnaf198
- Github - https://github.com/siamahnaf