Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

My Ignite typescript project post api call is returning an empty object as response

$
0
0

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

  1. Create Interfaces in apiTypes file
  2. Reference API and API problem inside APITypes file
  3. 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


Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>