https://github.com/siamahnaf/next-fetcher
A nextjs typescript friendly utility for seamless data fetching.
https://github.com/siamahnaf/next-fetcher
api api-fetching auto-fetching cookie cookies data-fetching js next next-fetcher nextjs
Last synced: 5 months ago
JSON representation
A nextjs typescript friendly utility for seamless data fetching.
- Host: GitHub
- URL: https://github.com/siamahnaf/next-fetcher
- Owner: siamahnaf
- License: other
- Created: 2024-06-05T07:41:37.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2026-01-01T19:18:10.000Z (6 months ago)
- Last Synced: 2026-01-07T03:22:23.197Z (6 months ago)
- Topics: api, api-fetching, auto-fetching, cookie, cookies, data-fetching, js, next, next-fetcher, nextjs
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/next-fetcher?activeTab=readme
- Size: 35.2 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
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
```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
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
```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
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-
```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`
## Connect with me
------------