Documents: request

Request

request is wrapper of fetch API, and a brief call of Fetcher's fetchResource.

Intro

In react-restful, request is a common method to sendding requests, usually used to send POST, PUT or DELETE. With GET, only use request when you need to send multiple requests at a time. For example, we will send a POST request to create a Pet:

Expample

First, export your request from setup file:

import { setupEnvironment } from 'react-restful';

const restfulEnv = setupEnvironment({
    // ...
});

export {
    request: restfulEnv.request
};

Ownpet resources :

import { Resource, Record } from 'react-restful';

export interface Pet extends Record {
    id: number;
    name: string;
}

export interface CreatePetRequestMeta {
    successMessage: string;
}

export const createPetResource = new Resource<Pet>({
    url: '/pet',
    method: 'POST',
    /**
     * Log message when fetch success, 
     * the Meta object is attached at the beginning of a Request
     */
    requestSuccess: (requestInfo: RequestInfo<CreatePetRequestMeta>) => {
        const { meta } = requestInfo;
        console.log(meta.successMessage);
    }
});

request returned a promise, so you can use async and await like this:

async function createPet(pet: Pet) {
    const requestParam = { type: 'body', value: pet };
    const requestMeta: CreatePetRequestMeta = { successMessage: `${pet.name} was created!` };
    try {
        const newPet = await request(
            createPetResource, 
            requestParam, 
            requestMeta
        );
        return newPet as Pet;
    } catch (error) {
        throw new Error(error);
    }
}

// somewhere in your app...
const newPet = await createPet({name: 'tom'});

Type definition:

type request = <DataModel, Meta = {}>(
    resource: Resource<DataModel>, 
    params?: RequestParameter | RequestParameter[], 
    meta?: Meta
) => Promise<DataModel>

javascript

Like the above example, but simpler:

export const createPetResource = new Resource({
    url: '/pet',
    method: 'POST',
    requestSuccess: (requestInfo) => {
        const { meta } = requestInfo;
        console.log(meta.successMessage);
    }
});

async function createPet(pet) {
    const requestParam = { type: 'body', value: pet };
    try {
        const newPet = await request(
            createPetResource, 
            requestParam, 
            { successMessage: `${pet.name} was created!` }
        );
        return newPet;
    } catch (error) {
        throw new Error(error);
    }
}

About Meta object

Meta is optional, it can be anything you pass at the beginning of your request, and you can get it back at the end. For example, if you want to display a specific message to a user when a request completes (including success or failure), you need to put the message in the meta, and the message will be displayed at requestSuccess (or requestFailed) as the example above. My opinion here is that we should separate the business logic and the side-effect to make things clearer.