# 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 ```bash $ npm i next-fetcher ``` ## Server Components ```bash 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 (

{JSON.stringify(data)}

); }; export default Page; ``` ## API (Server Components)

Name	Types	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

## Client Components ```bash 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 (

{JSON.stringify(data)}

); }; export default Page; ``` ## API (Client Components)

Name	Types	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

# 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- ```bash 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- ```bash fetcher.get("/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. ```bash 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: ```bash deleteSession('key', { path: '/path', domain: '.yourdomain.com' }); ``` ## API (Cookie Management)

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`

# Stay in touch - Author - [Siam Ahnaf](https://www.siamahnaf.com/) - Website - [https://www.siamahnaf.com/](https://www.siamahnaf.com/) - Twitter - [https://twitter.com/siamahnaf198](https://twitter.com/siamahnaf198) - Github - [https://github.com/siamahnaf](https://github.com/siamahnaf)