Dispatching

---

Trigger request

We can execute queries using the built-in send() function or use React hooks.

import { postLogin } from "server/auth";

...

const handleLogin = async (values: {email: string, password: string}) => {
  const { data, error, status } = await postLogin.setData(values).send();

  if(data) {
    // perform login
    ...
  } else {
    // handle error
    ...
  }

}

...

Method send()

The send method takes full advantage of the potential of our features. We have implemented debouncing, retries, cancellation and offline awaiting solutions.

We can also dynamically transfer data to execute the request.

import { postData } from "server/auth";

...

const handleSend = async (values: ValuesType) => {
  const { data, error, status } = await postData.send({
    data: values,
    params: { accountId: 2 },
    queryParams: { param1: "test", param2: [1,2,3] }
  })

  if(data) {
    // perform success action
    ...
  } else {
    // handle error
    ...
  }

}

...

Lifecycle

send() method allow us to hook into request lifecycle. We can do it with one of following methods.

type FetchSendActionsType<Request> = {
  onDownloadProgress: (values: ProgressType, details: RequestEventType<Request>) => void; 
  onRemove: (details: RequestEventType<Request>) => void; 
  onRequestStart: (details: RequestEventType<Request>) => void; 
  onResponse: (response: ResponseReturnType<ExtractResponseType<Request>, ExtractErrorType<Request>, ExtractAdapterType<Request>>, details: ResponseDetailsType) => void; 
  onResponseStart: (details: RequestEventType<Request>) => void; 
  onSettle: (requestId: string, request: Request) => void; 
  onUploadProgress: (values: ProgressType, details: RequestEventType<Request>) => void; 
}

Example

const { data, error, status } = await getData.send({
  onSettle: (requestId) => {
    console.log(`Starting request: ${requestId}`);
  },
  onDownloadProgress: (values) => {
    console.log(`Download progress: ${values}`);
  },
  onResponse: (response) => {
    console.log(`Got response: ${response}`);
  },
});