next-fetcher
TypeScript icon, indicating that this package has built-in type declarations

2.5.5 • Public • Published

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.

Buy Me A Coffee

  • 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

Package Sidebar

Install

npm i next-fetcher

Weekly Downloads

3

Version

2.5.5

License

ISC

Unpacked Size

58.7 kB

Total Files

38

Last publish

Collaborators

  • siamahnaf