Request

Get up and running with wappi-fe in minutes. This guide will walk you through the basic setup and your first API call.

1. Import request from wappi-fe

1import { request } from 'wappi-fe'

2. Call your API

1const response = async () => (request(WAPPI_CONFIG, {
2  name: 'Get User1234 Information', // This will create a url in your network tab of: GetUser1234Information
3  query: 'NameSpace_FunctionName_1_0_0',
4  data: {
5    // ... body object specific to the query endpoint type
6  },
7  authRequired: true,
8}))

Structure

1interface request {
2  name: string,
3  query: string // The endpoint name. 
4  data: any // Strict type of endpoint body
5  results?: {
6    name: string;
7    include?: Array<{ name: string; key: string }>
8    exclude?: Array<{ key: string }>
9  }
10  authRequired?: boolean
11  resultsOnly?: boolean
12  errorCallback?: (x: any) => void
13  successCallback?: (x: any) => void
14  logResults?: boolean
15  logFullResponse?: boolean
16}

name:

string

required

This is the specific name of the information you want returned. As multiple requests can be made, this breaks them up.

tip: Add a dynamic ID into the name for easy observability
Example: Get info for ${user.name}

authRequired:

boolean

optionally required - depends on query type

If true, it will get the auth token that is automatically set.
See the Authentication section.

authRequired:

boolean

optionally required - depends on query type

If true, it will get the auth token that is automatically set.
See the Authentication section.

query:

string

required

This is the name of the function on the server.
This function will be the one called.

data:

any

optionally required - inherits query Body type

An object of the all the data required for the endpoints Body type
This data is specific to the function and should be typed in the NameSpace_FunctionName_1_0_0__Body type.

Typescript should show an error of missing or mis-typed types.

results:

any

optional

This determines what results you receive.
If you leave it as a blank obj or don't include it, it will return everything the function returns.
Otherwise you can specify what to include or exclude.

name:

string

optional

The name you want the results to return as.
Default = results

include:

object array

optional

An array of objects, with

name:

string

required

The name that you want it to be called. So you can rename it to match your frontend app.

key:

string

required

The backend key of the object that you want to include

exclude:

object array

optional

An array of objects, with

key:

string

required

This is the backend key of the object that you want to exclude from the results. This allows the returned object to be clean to what you need, to help with clarity.

Logic for including and excluding is as follows:

If nothing is defined in include, then everything will be included.
If nothing is defined in exclude, then nothing will be excluded. If Nothing is defined in include, but something is defined in exclude, everything defined in exclude will be removed. If a key is defined in include and in exclude, then it will be included

Why include and exclude?

Usually the processing of the endpoint is faster than the Latency of sending and receiving the data. So you might have an endpoint that can return a lot of data, but you only want 1 piece of it. So instead of creating a new backend function, you can just define what you want returned and get the same result.

successCallback:

function

optional

On success this will be called with the response object passed in

1successCallback: (response) => {
2  // Logic to do something with the response.
3  console.log('response', response)
4}

errorCallback:

function

optional

On error this will be called with the error response

1errorCallback: (errorResponse) => {
2  // Logic to do something with the error.
3  console.error('errorResponse', errorResponse)
4}

logResults:

boolean

optional

This will console.log out the results or the name of the results you requested.
Handy if you want to inspec the results object.

logFullResponse:

boolean

optional

This will console.log out the full wappi server response from the endpoint.
Handy if you want to check your wappi server response.