‘await’ has no effect on the type of this expression

I searched about this but I didn’t find anything specific for what I need. If there is one, please, share here.

I’m trying to create a generic service to be called in various components. Since it’s a function that requests data from an external source, I need to treat it as an asynchronous function. Problem is, the editor returns the message “‘await’ has no effect on the type of this expression”. And the app indeed crashes since there is no data yet.

People.js calls the service requests.js

import React, { useEffect, useState } from "react";
import requests from "../services/requests";

export default () => {

   // State
   const [ people, setPeople ] = useState({ count: null, next: null, previous: null, results: [] });

   // Tarefas iniciais
   useEffect(() => {
       carregarpeople(1);
   }, []);

   // Carregando os dados da API
   const carregarpeople = async (pageIndex) => {
       const peopleResponse = await requests("people", pageIndex);

       // This line below needs to be executed but it crashes the app since I need to populate it with the data from the function requests
       // setPeople(peopleResponse);
   }


   return (
       <div>
       {
           people.results.length > 0 ? (
               <ul>
                   {
                       people.results.map(person => <li key = { person.name }>{ person.name }</li>)
                   }
               </ul>    
           ) : <div>Loading...</div>
       }
       </div>
   )
  }

And this is requests.js, where it returns the json from API

export default (type, id) => {
console.table([ type, id ]);

fetch(`https://swapi.co/api/${type}/?page=${id}`)

.then(response => response.json())
.then(json => {
    console.log(json);
    return json;
})}

Answer

await is only useful if you use it with a promise, but requests does not return a promise. It doesn’t have a return statement at all, so it’s implicitly returning undefined.

Looks like you meant for it to return a promise, so here’s your code with the return added in:

export default (type, id) => {
  console.table([ type, id ]);
  return fetch(`https://swapi.co/api/${type}/?page=${id}`)
    .then(response => response.json())
    .then(json => {
      console.log(json);
      return json;
    })
}

p.s, if you prefer to do this using async/await, it would look like:

export default async (type, id) => {
  console.table([ type, id ]);
  const response = await fetch(`https://swapi.co/api/${type}/?page=${id}`);
  const json = await response.json();
  console.log(json);
  return json;
}