Using React UseEffect() to fetch data from GraphQL

Question

I'm trying to fetch data from graphQL, and I know that by putting function into the react UseEffect(), I would be able to call the function once the data is updated and constructed. However, I'm working on a chatroom, and the data does not appear on the screen:

import {
  CREATE_MESSAGE_MUTATION,
  MESSAGES_QUERY,
  MESSAGE_SUBSCRIPTION,
} from "../graphql";
import { useQuery, useSubscription } from "@apollo/client";
import React, { useEffect } from "react";
import { Tag } from "antd";
const ChatBox = ({ me, friend, ...props }) => {
  //me friend are strings

  const chatBoxName = [me, friend].sort().join("_");
  const { loading, error, data, subscribeToMore } = useQuery(MESSAGES_QUERY, {
    variables: { name: chatBoxName },
  });

  useEffect(() => {
    try {
      subscribeToMore({
        document: MESSAGE_SUBSCRIPTION,
        variables: { name: chatBoxName },
        updateQuery: (prev, { subscriptionData }) => {
          if (!subscriptionData.data) return prev;
          const newMessage = subscriptionData.data;
          console.log("Subscribing more data: ", newMessage);
        },
      });
    } catch (e) {
      console.log("Error in subscription:", e);
    }
  }, [subscribeToMore]);

  if (loading) return <p>loading ...</p>;
  if (error) return <p>Error in frontend chatbox: {error}</p>;

  return (
    <div className="App-messages">
      {console.log(data.chatboxs[0].messages)}
      {data.chatboxs[0].messages.map(({ sender: { name }, body }) => {
        <p className="App-message">
          <Tag color="blue">{name}</Tag>
          {body}
        </p>;
      })}
    </div>
  );
};

export default ChatBox;

After a small delay of loading ..., it turns to the <div className="App-messages"> with no messages inside. However, on the console I can clearly see the messages that I want to print. What is the problem of the function in UseEffect()? I would be so appreciated if anyone can help .

It looks like you're missing chatBoxName in the useEffect dependency array. That would be where I start — Nick
– Nick, Commented Dec 25, 2021 at 14:50

Eduard · Accepted Answer · 2021-12-25 17:53:11Z

1

{data.chatboxs[0].messages.map(({ sender: { name }, body }) => { // <- this part
    <p className="App-message">
      <Tag color="blue">{name}</Tag>
      {body}
    </p>;
  })}

As a callback, you declared a function that does not return JSX elements.

Replace with this

{data.chatboxs[0].messages.map(({ sender: { name }, body }) => (
    <p className="App-message">
      <Tag color="blue">{name}</Tag>
      {body}
    </p>;
  ))}

answered Dec 25, 2021 at 17:53

Eduard

1,3848 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jerry Over a year ago

Oh god thank you that works for me! Is it because in {} this should be javascript instead of JSX?

Eduard Over a year ago

Yes, my friend, this is how javascript's map function works, it loops through elements and reassigns each value to what you have returned inside the callback function. So if nothing is returned, then each value is going to be undefined after the loop and no HTML is going to be rendered.

Collectives™ on Stack Overflow

Using React UseEffect() to fetch data from GraphQL

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related