在 React Query 中优化数据库查询的索引和关联

import { useQuery } from 'react-query';

const fetchUsers = async () => {
  // 使用索引来查询数据库中的用户数据
  const result = await database.query('SELECT * FROM users INDEXED BY users_index');

  return result;
};

const Users = () => {
  const { data, isLoading, error } = useQuery('users', fetchUsers);

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

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

  return (
    <div>
      {data.map(user => (
        <div key={user.id}>{user.name}</div>
      ))}
    </div>
  );
};

export default Users;

import { useInfiniteQuery } from 'react-query';

const fetchCommentsByPostId = async ({ pageParam = 0 }) => {
  // 根据文章ID关联查询评论数据
  const result = await database.query('SELECT * FROM comments WHERE post_id = ? LIMIT 10 OFFSET ?', [postId, pageParam * 10]);

  return result;
};

const Post = ({ postId }) => {
  const {
    data,
    isLoading,
    fetchNextPage,
    hasNextPage,
  } = useInfiniteQuery(['comments', postId], fetchCommentsByPostId, {
    getNextPageParam: (lastPage, allPages) => {
      // 如果还有更多数据，返回下一页的页码
      if (lastPage.length === 10) {
        return allPages.length;
      }

      return undefined;
    },
  });

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

  return (
    <div>
      {data.pages.map(page => (
        <div key={page}>
          {page.map(comment => (
            <div key={comment.id}>{comment.body}</div>
          ))}
        </div>
      ))}
      {hasNextPage && <button onClick={fetchNextPage}>Load More</button>}
    </div>
  );
};

export default Post;