Next Client Architecture

Api-query-object is a JavaScript library that quickly and automatically creates HTTP requests, aligning with the client-server architecture.

Features

With Api-query-object, the user can list their endpoints, automatically generating:

• caucolumServer object: A class object whose methods are used on the server side, such as in getServerSideProps and getStaticProps.
• caucolumClient object: A class object with the same methods as server, but with embedded business logic, for use on pages and components. These objects include:
  • makeRequest: A usable function to trigger the client request.
  • data: The response of the request.
  • args: Parameters of the last request.
  • status: Represents the current state of the request.
    It can be one of the following values:
    • 'idle': No request has been made yet.
    • 'loading': A request is currently in progress.
    • 'loaded': The request was completed successfully.
    • 'error': The request failed due to an error.

Usage Example

1. Install library:

npm i @caucolum/api-query-object

2. Created files

The created folder api-query-objects contains files for managing API queries.

api.ts: This file stores a list of available API endpoints used in the project. factory.ts: This file is responsible for creating and returning objects that represent specific API query configurations.

📁 my-project
├── 📁 src 
    └── 📁 api-query-objects
        └── 📄 api.ts
        └── 📄 factory.ts

3. Define Endpoints

In api.ts, user can implements him api endpoints:

import { ApiEndpoint } from "@caucolum/api-query-object";

const api = {

} as const satisfies Record<string, ApiEndpoint>;

export default api;

The objects are automatically created when implementing the user api endpoints:

import { createServerNextArchitecture, createClientNextArchitecture } from "@caucolum/api-query-object";
import api from "./api";

const caucolumServer = createServerNextArchitecture(api);
const caucolumClient = createClientNextArchitecture(caucolumServer, api);

export {
    caucolumServer,
    caucolumClient
}

Now just include your own API in api.ts:

import { ApiEndpoint } from "@caucolum/api-query-object";

interface BreedsImageRandomArgProps {
    breed?: string;
}

interface BreedsImageRandomDataProps {
    message: string;
    status: string;
}

interface BreedsHoudImagesDataProps {
    message: string[];
    status: string;
}

const api = {
    breeds_image_random: {
        url: '/breeds/image/random',
        method: 'get',
        authenticated: false,
        ARGS_PROPS: {} as BreedsImageRandomArgProps,
        DATA_PROPS: {} as BreedsImageRandomDataProps,
    },
    breed_hound_images: {
        url: '/breed/hound/images',
        method: 'get',
        authenticated: false,
        DATA_PROPS: {} as BreedsHoudImagesDataProps,
    },
} as const satisfies Record<string, ApiEndpoint>;

export default api;

4. Server-Side Usage (getServerSideProps)

import { caucolumServer } from "@/api-query-objects";

export const getServerSideProps = async () => {
    const response = await caucolumServer.breed_hound_images();
    return {
        props: {
            listByBreed: response.message
        },
    };
};

interface PageProps {
    listByBreed: string[];
}

const Index = ({ listByBreed }: PageProps) => {
    return <div>
        <div className="h-50 overflow-y-scroll">
            {listByBreed.map((breed, index) => (
                <div key={index}>{breed}</div>
            ))}
        </div>
    </div>
};

export default Index;

5. Client-Side Usage (React Component)

import { caucolumClient } from "@/api-query-objects";

const Index = () => {
    const { makeRequest, data, isSuccess } = caucolumClient.breeds_image_random();
    return <div>
        <div>
            {isSuccess && <img src={data.message} alt="" />}
            <button onClick={() => makeRequest()}>New request</button>
        </div>
    </div>
};

export default Index;