Untitled

  const [page, setPage] = React.useState(0)
  const [rowsPerPage, setRowsPerPage] = React.useState(10)

  React.useEffect(() => {
    console.log({ page })
  }, [page])

  React.useEffect(() => {
    console.log("In useEfect", rowsPerPage)
    refetch()
  }, [rowsPerPage])

  const handleChangePage = (
    event: React.MouseEvent<HTMLButtonElement> | null,
    newPage: number
  ) => {
    setPage(newPage)
  }

  const handleChangeRowsPerPage = (
    event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
  ) => {
    setRowsPerPage(parseInt(event.target.value))
    setPage(0)
  }

  async function getPatients(limit: number = 10) {
    console.log("in query fn", rowsPerPage)

    const response = await axios.get(
      `http://127.0.0.1:8000/api/patients/?limit=${limit}&offset=${10}`,
      {
        headers: {
          Accept: "application/json",
          Authorization:
            "Token 6ea335a26620fe20f22520a7774caa31c6b90252d07bb05cb54ed73fbcf08829",
        },
      }
    )
    return response.data
  }

  // Queries
  const { data, isLoading, refetch } = useQuery<DataReponse>({
    queryKey: ["patients"],
    queryFn: () => getPatients(rowsPerPage),
  })