@smartbit4all/fetch-service
v1.0.1
Published
---
Downloads
1
Keywords
Readme
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.