I have an ignite react native project. and I am trying to consume an APOI from the app and My Ignite typescript project post API call is returning an empty object {} as a response
how do I call an async function inside another async function in a typescript react-native project?
Steps Taken
- Create Interfaces in apiTypes file
- Reference API and API problem inside APITypes file
- Create API inside Login file
See my code below1.API typesapp\services\api\api.types.ts
import { GeneralApiProblem } from "./api-problem"import { Character } from "../../models/character/character"export interface User { id: number name: string}export interface APIUser { success: boolean, message: null, data: UserData}export interface UserData { userId: string, organisationId: string, email: string, firstname: string, lastName: string, userToken: string, refreshToken: string}export type GetUsersResult = { kind: "ok"; users: User[] } | GeneralApiProblemexport type GetUserResult = { kind: "ok"; user: User } | GeneralApiProblemexport type GetCharactersResult = { kind: "ok"; characters: Character[] } | GeneralApiProblemexport type GetCharacterResult = { kind: "ok"; character: Character } | GeneralApiProblem// Added export type PostLoginUserResult = { kind: "ok"; apiUser: APIUser } | GeneralApiProblem
app\services\api\api.ts
import { ApisauceInstance, create, ApiResponse } from "apisauce"import { getGeneralApiProblem } from "./api-problem"import { ApiConfig, DEFAULT_API_CONFIG } from "./api-config"import * as Types from "./api.types"import { LOGIN_URL } from "../../utils/constants"/** * Manages all requests to the API. */export class Api { /** * The underlying apisauce instance which performs the requests. */ apisauce: ApisauceInstance /** * Configurable options. */ config: ApiConfig /** * Creates the api. * * @param config The configuration to use. */ constructor(config: ApiConfig = DEFAULT_API_CONFIG) { this.config = config } /** * Sets up the API. This will be called during the bootup * sequence and will happen before the first React component * is mounted. * * Be as quick as possible in here. */ setup() { // construct the apisauce instance this.apisauce = create({ baseURL: this.config.url, timeout: this.config.timeout, headers: { Accept: "application/json", }, }) } /** * Gets a list of users. */ async getUsers(): Promise<Types.GetUsersResult> { // make the api call const response: ApiResponse<any> = await this.apisauce.get(`/users`) // the typical ways to die when calling an api if (!response.ok) { const problem = getGeneralApiProblem(response) if (problem) return problem } const convertUser = (raw) => { return { id: raw.id, name: raw.name, } } // transform the data into the format we are expecting try { const rawUsers = response.data const resultUsers: Types.User[] = rawUsers.map(convertUser) return { kind: "ok", users: resultUsers } } catch { return { kind: "bad-data" } } } /** * Gets a single user by ID */ async getUser(id: string): Promise<Types.GetUserResult> { // make the api call const response: ApiResponse<any> = await this.apisauce.get(`/users/${id}`) // the typical ways to die when calling an api if (!response.ok) { const problem = getGeneralApiProblem(response) if (problem) return problem } // transform the data into the format we are expecting try { const resultUser: Types.User = { id: response.data.id, name: response.data.name, } return { kind: "ok", user: resultUser } } catch { return { kind: "bad-data" } } } // writen async postLoginUser(email: string, password: string): Promise<Types.PostLoginUserResult> { // make the api call const dataToSend = { email: email, password: password, } try { console.log("<<< dataToSend >>>>>", dataToSend) const response: ApiResponse<Types.APIUser> = await this.apisauce.post(LOGIN_URL, dataToSend) console.log("<<< after post >>>>>") // the typical ways to die when calling an api if (!response.ok) { const problem = getGeneralApiProblem(response) if (problem) return problem } // transform the data into the format we are expecting console.log("<<< post is OK >>>>>") const resultUser: Types.APIUser = { success: response.data.success, message: response.data.message, data: response.data.data, } return { kind: "ok", apiUser: resultUser } } catch { return { kind: "bad-data" } } }}
app\screens\login\login-screen.tsx
import { Api } from "../../services/api" const onLogin: any = async () => { console.log("<<< inside onlogin >>>>>") try { console.log('<<<<<<<BEFORE RESPONSE FOR LOGIN >>>>>>>>>'); const api = new Api() api.setup() // const res = api.getUser("1") const res = api.postLoginUser(email, password) console.log(res); console.log('<<<<<<<AFTER RESPONSE FOR LOGIN >>>>>>>>>'); return res }catch (err) { console.log(err); Alert.alert('An Error occurred '+ err); } }
Please advise me on how to get the value returned from the external API.Also the API has been tested and working perfectly when called using postman