Users.tsx

import { gql } from "@apollo/client";
import { useQuery } from "@apollo/client/react";
import CreateUserDialog from "./CreateUserDialog";
import { useState } from "react";
import { User } from "./types";

interface UsersQuery {
  users: User[];
}

export const USERS_QUERY = gql`
  query Users {
    users {
      id
      name
    }
  }
`;

export default function Users() {
  const [isCreateUserDialogOpen, setIsCreateUserDialogOpen] = useState(false);
  const { data, loading, error, refetch } = useQuery<UsersQuery>(USERS_QUERY);

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

  return (
    <>
      <div>
        <button onClick={() => setIsCreateUserDialogOpen(true)}>
          Create User
        </button>
      </div>
      <div>
        {data?.users.length ? (
          <UsersList users={data.users} />
        ) : (
          <div>No users</div>
        )}
      </div>
      <CreateUserDialog
        isOpen={isCreateUserDialogOpen}
        onClose={() => setIsCreateUserDialogOpen(false)}
        onSuccess={() => {
          setIsCreateUserDialogOpen(false);
          refetch();
        }}
        onError={(error) => {
          console.error(error);
        }}
      />
    </>
  );
}

function UsersList(props: { users: User[] }) {
  return (
    <div>
      {props.users.map((user) => (
        <div key={user.id}>{user.name}</div>
      ))}
    </div>
  );
}