如何在back4app解析服务器中使用两个useParseQuery钩子实现一对一聊天应用

import { useParseQuery } from 'back4app-react';

const ChatList = () => {
  const { data: chats, error, loading } = useParseQuery('Chat', {
    equalTo: {
      participants: Parse.User.current(),
    },
  });

  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <div>
      {chats.map((chat) => (
        <div key={chat.id}>{chat.get('name')}</div>
      ))}
    </div>
  );
};

export default ChatList;

import { useParseQuery } from 'back4app-react';

const ChatDetail = ({ chatId }) => {
  const { data: messages, error, loading } = useParseQuery('Message', {
    equalTo: {
      chat: {
        __type: 'Pointer',
        className: 'Chat',
        objectId: chatId,
      },
    },
    include: 'sender',
  });

  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <div>
      {messages.map((message) => (
        <div key={message.id}>
          <div>{message.get('content')}</div>
          <div>From: {message.get('sender').get('username')}</div>
        </div>
      ))}
    </div>
  );
};

export default ChatDetail;