Smart Fetch Service for NextJS

How to use

Installation

Go to your project, open the terminal and use the following command:

npm i @smartbit4all/fetch-service

Usage

This package reduces the amount of code needed to be written for a simple REST API request. I recommend to use this package with the @smartbit4all/di-provider since with that ApiService(s) can be created and injected into your code.

Simply create services for your APIs like this:

example-api.service.ts:

import { Injectable } from "@smartbit4all/di-provider";

@Injectable
export class ExampleApiService extends SmartFetchService {

    constructor() {
        super();
    }

    public async getExample(): Promise<GetExampleResponse | undefined> {
        return await this.doFetch({
            method: SmartFetchMethod.GET,
            path: "getExample",
        });
    }

    public async putExample(): Promise<PutExampleResponse | undefined> {
        return await this.doFetch({
            method: SmartFetchMethod.PUT,
            path: "putExample",
        });
    }

    public async postExample(body: PostExampleBody): Promise<PostExampleResponse | undefined> {
        return await this.doFetch({
            method: SmartFetchMethod.POST,
            path: "postExample",
            body: body
        });
    }

    ...
}

Use your services anywhere you want to:

any.component.ts:

import { Provide } from "@smartbit4all/di-provider";

@Provide([ExampleApiService])
class Home extends React.Component<any> {

    private url?: string;

    constructor(props: any, private apiService: ExampleApiService) {
        super(props);
    }

    componentDidMount(): void {
        // Set the url for the service
        this.url = window.location.origin;
        this.apiService.setUrl(this.url!);

        // Set the default headers and cors mode
        let headers: [string, string][] = [];

        headers.push(["Content-Type", "application/json"]);

        this.apiService.setUp({
            headers,
            mode: "cors",
        });
    }

    async getExample(): Promise<void> {
        let example = await this.apiService.getExample();
    }

    render() {
        return (
            <div>
                <button onClick={() => this.getExample()}>
                    getExample
                </button>
            </div>
        );
    }

}

Don't forget to set up the proxy for CORS policy:

.env, .env.production:

BE_PORT=9190
EXAMPLE_BE=http://localhost:${BE_PORT}
EXAMPLE_API=${EXAMPLE_BE}/api

next.config.json:

module.exports = {
    ...
    async rewrites() {
        return [
            {
                source: "/api/:path*",
                destination: process.env.EXAMPLE_API + "/:path*", // Proxy to Backend
            },
        ];
    },
    ...
}

Available request methods:

export enum SmartFetchMethod {
    GET = "GET",
    POST = "POST",
    PUT = "PUT",
    PATCH = "PATCH",
    DELETE = "DELETE",
    COPY = "COPY",
    HEAD = "HEAD",
    OPTIONS = "OPTIONS",
    LINK = "LINK",
    UNLINK = "UNLINK",
    PURGE = "PURGE",
    LOCK = "LOCK",
    UNLOCK = "UNLOCK",
    PROPFIND = "PROPFIND",
    VIEW = "VIEW",
}

Version logs

@smartbit4all/fetch-service v1.0.1

Type: Update

The package has been published.