API Integration

Velzon React/Next.js comes with a fake-backend setup for demos. You will find all files related to API integrations in the src/helpers folder. By default we provide a fake-backend, but you can remove it and use your custom API by doing the following changes in the src/helpers.

src/helpers/api_helper.ts contains Axios setup to call server API(s) including get, put, post, delete methods, interceptors, and token set methods.
src/helpers/fakebackend_helper.ts contains demo API call functions.
src/helpers/url_helper.ts contains all module API URLs.

Note: We have added a fake-backend setup just for user interactions. If you are working with a real API integration, there is no need for the fake-backend. You can:
- Remove or ignore src/helpers/AuthType/fakeBackend.ts.
- Do not initialize the fake backend in src/utils/fakeBackendInit.ts and/or remove the wrapper in src/components/providers/FakeBackendProvider.tsx.
- Ensure your .env.local does not set NEXT_PUBLIC_DEFAULTAUTH=fake.
Then update the API URLs for your modules in src/helpers/url_helper.ts.

How to integrate a custom API?

Please follow the steps below:

-> Let's assume the API URL is https://jsonplaceholder.typicode.com/posts. First, add this URL in src/helpers/url_helper.ts.

export const GET_DEMO_DATA = "https://jsonplaceholder.typicode.com/posts";

-> Import the API client and URL in src/helpers/fakebackend_helper.ts and add a function. We created a new function getDemoData and exported it so it can be used elsewhere.

import { APIClient } from "@/helpers/api_helper";
import * as url from "@/helpers/url_helper";

const api = new APIClient();

export const getDemoData = (params: any) => api.get(url.GET_DEMO_DATA, params);

-> A reducer works with thunks (middleware). For example, in src/slices/ecommerce/reducer.ts we can get data from a thunk.ts.

import { createSlice } from "@reduxjs/toolkit";
import { getData } from "./thunk";

export const initialState = {
  dataList: [],
};

const EcommerceSlice = createSlice({
  name: "Data",
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    // data
    builder.addCase(getData.fulfilled, (state: any, action: any) => {
      state.dataList = action.payload;
    });
    builder.addCase(getData.rejected, (state: any, action: any) => {
      state.error = action.payload?.error || null;
    });
  },
});

-> The demo example below is written in TypeScript and also works the same in JavaScript with a .js extension.

-> A thunk acts as middleware. Example src/slices/Data/thunk.ts. Import the API from @/helpers/fakebackend_helper.

import { createAsyncThunk } from "@reduxjs/toolkit";
import { getDemoData as getDemoDataApi } from "@/helpers/fakebackend_helper";

export const getData = createAsyncThunk("datas/getData", async () => {
  try {
    const response = await getDemoDataApi({});
    return response;
  } catch (error) {
    throw error;
  }
});

-> After the above steps, you can fetch data where needed by dispatching the thunk and selecting from state.

import { useEffect } from "react";
import { useSelector } from "react-redux";
import { createSelector } from "reselect";
import { useAppDispatch } from "@/hooks/useRedux";
import { getData as onGetData } from "@/slices/thunks";

const selectDataTable = createSelector(
  (state: any) => state.Data,
  (state) => ({
    dataList: state.dataList,
  })
);

const dispatch = useAppDispatch();
const { dataList } = useSelector(selectDataTable);

useEffect(() => {
  dispatch(onGetData());
}, [dispatch]);