<!-- Source: https://www.wappi.dev/frontend-integration/request -->

# 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

```typescript
import { request } from 'wappi-fe'
```

### 2. Call your API

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

## Structure

```typescript
interface request {
  name: string,
  query: string // The endpoint name. 
  data: any // Strict type of endpoint body
  results?: {
    name: string;
    include?: Array<{ name: string; key: string }>
    exclude?: Array<{ key: string }>
  }
  authRequired?: boolean
  resultsOnly?: boolean
  errorCallback?: (x: any) => void
  successCallback?: (x: any) => void
  logResults?: boolean
  logFullResponse?: boolean
}
```

#### 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

```typescript
successCallback: (response) => {
  // Logic to do something with the response.
  console.log('response', response)
}
```

#### errorCallback:

function

optional

On error this will be called with the error response

```typescript
errorCallback: (errorResponse) => {
  // Logic to do something with the error.
  console.error('errorResponse', errorResponse)
}
```

#### 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.

URL: https://www.wappi.dev/frontend-integration/request