1

I am working on a chat application. I am using next js Axios. I created a dynamic route for example chat/:pid. I want to fetch data using this pid. I used useRouter but when I load the page my values say undefined.

const router = useRouter();
  const { pid } = router.query;
  useEffect(() => {
    setLoading(true);
      const getChatList = async () => {
        const res = await axios.get(
          `${process.env.NEXT_PUBLIC_API_URL}api/chat/${pid}`
        );
        setChatItem(res.data);
      };
      getChatList();
    setLoading(false);
  }, []);

  return (
    <div>
      {loading ? (
        <h2>loading</h2>
      ) : (
        <div>
          <h3>Chat Admin: {chatItem.admin}</h3>
          <h3>Chat Name: {chatItem.chatName}</h3>
          <h3>Chat Title {chatItem.chatTitle}</h3>
          <h3>This chat has {chatItem.members.length} members</h3>
        </div>
      )}
    </div>
  );

it says chatItem.admin is undefined.

Sajib Hossain
  • 81
  • 2
  • 8
  • Just a recommendation, `useEffect` is not meant to be used for fetching data in. I recommend trying a package like ReactQuery for fetching data. https://react-query-v3.tanstack.com/ – Felix Eklöf Jan 05 '23 at 09:06

1 Answers1

0

You are doing async api call. Move setLoading(false); inside getChatList function next to setChatItem(res.data);.

const router = useRouter();
const { pid } = router.query;
useEffect(() => {
  setLoading(true);
    const getChatList = async () => {
      const res = await axios.get(
        `${process.env.NEXT_PUBLIC_API_URL}api/chat/${pid}`
      );
      setChatItem(res.data);
      setLoading(false);
    };
    getChatList();
}, []);

return (
  <div>
    {loading ? (
      <h2>loading</h2>
    ) : (
      <div>
        <h3>Chat Admin: {chatItem.admin}</h3>
        <h3>Chat Name: {chatItem.chatName}</h3>
        <h3>Chat Title {chatItem.chatTitle}</h3>
        <h3>This chat has {chatItem.members.length} members</h3>
      </div>
    )}
  </div>
)
Sanmugam
  • 28
  • 6