Skip to main content

Custom Fetch function

IMPORTANT: This approach is being deprecated, to modify a network request or response please follow the axios instance guide

If you want to add authentication, CSRF prevention, custom headers, caching or special treatment of network requests, you can provide your own fetch function to the form engine. If you don't provide one, the form engine will use its own (also available in _.futch).

Fetch is a function very similar to the standard window.fetch but with an additional onProgress parameter:

ParamTYPEDescription
urlstringURL to be requested
optionsRequestInitThe request options e.g. {method?: string, headers?: HeadersInit, body?: BodyInit, mode: RequestMode},
method: Request method, usually GET or POST
headers: Headers to append
body: Data to send when using POST
mode: Request mode, e.g. cors, same-origin
onProgress?onProgress?: (x: Record<string, unknown>) => voidCallback to be called on upload progress

A Promise will be returned that resolves to an object with 2 methods:

MethodDescription
json()returns a Promise with the json
text()returns a Promise with the text

Then you pass your custom fetch function to the engine like this:

<Form
{...formProps}
fetch={customFetch}
/>

NOTE: Please keep in mind that for now the expected fetch function is working only with JSON and string responses.