next-fetcher v2.5.6

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