query-index-demo.js

function QueryIndexDemo() {
  const [currentPage, setCurrentPage] = useState(1);
  return (
    <Query
      userType="vendor"
      query={{
        grimers: {
          fields: ["nickname", "hp", "createdAt"],
          paginate: {
            page: currentPage,
            size: 10,
          },
        },
      }}
      render={{
        Loading: () => <p>loading...</p>,
        Error: (props) => {
          return <p>error!</p>;
        },
        Success: (props) => {
          const results = props?.data?.grimers?.data || [];
          return (
            <Container>
              <table>
                <thead>
                  <tr>
                    <th>nickname</th>
                    <th>hp</th>
                    <th>created at</th>
                  </tr>
                </thead>
                <tbody>
                  {results.map(
                    ({ id, attributes: { nickname, hp, createdAt } }) => (
                      <tr key={id}>
                        <td>
                          <Link href={`/query-detail-demo/${id}`}>
                            <a>{nickname}</a>
                          </Link>
                        </td>
                        <td>{hp}</td>
                        <td>{createdAt}</td>
                      </tr>
                    )
                  )}
                </tbody>
              </table>

              <button onClick={() => setCurrentPage(currentPage + 1)}>
                next
              </button>
            </Container>
          );
        },
      }}
    />
  );
}