Calling an API

Discord Q&A strapi-questions
1

Hello, I want to call my messages API: http://localhost:1337/api/users/1?populate=messages but I got all the time this error: I can call the API in postman but not in the frontend

This topic has been created from a Discord post (1244539535338242099) to give it more visibility.
It will be on Read-Only mode here.
Join the conversation on Discord

2

const ChatOverview = () => {
const [messageData, setMessageData] = useState<any>(); // Set initial value as an empty array
const [userData, setUserData] = useState(null);

const fetchUserData = async () => {
try {
const response: any = await apiService.get(“/users/1”);

  if (response?.error) {
    throw response?.error;
  } else {
    setUserData(response.data);
  }
} catch (error) {
  console.error(error);
}

};

const fetchUserMessages = async () => {
try {
if (!userData || !userData.id) {
return;
}

  const response: any = await apiService.get(
    `/users/${messageData.id}/?populate=messages`
  );

  if (response?.error) {
    throw response?.error;
  } else {
    console.log(response.data);
    setMessageData(response.data);
  }
} catch (error) {
  console.error(error);
}

};

useEffect(() => {
fetchUserData();
}, );

useEffect(() => {
if (userData && userData.id) {
fetchUserMessages();
}
}, [userData]);

return (

<Box sx={{ overflow: “hidden” }}>

    {/* Messages */}
    <List sx={{ flex: 1, overflow: "auto" }}>
      {messageData.map((message) => (
        <ListItem key={message.id}>
          {/* Display the user and content of the message */}
          <Avatar
            alt={message.user.username}
            src={message.user.avatar_url}
          />
          <ListItemText
            primary={message.user.username}
            secondary={message.content}
          />
        </ListItem>
      ))}
    </List>
  </Box>
</ThemeProvider>

);
};

export default ChatOverview;

3

Looks like a typescript error

4

You must properly type your constants, parameters etc if you’re using Typescript

5

If you don’t want to; just use .jsx