next-fetcher

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)

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

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)

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

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)

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
• Website - https://www.siamahnaf.com/
• Twitter - https://twitter.com/siamahnaf198
• Github - https://github.com/siamahnaf