Error when reloading/refreshing page

[madrimovganijon]

Hello, can you please point me to the line that is causing this and how to resolve it?
It works on the initial load, then if you re-load the page, it throws an error:
Uncaught TypeError: Cannot read properties of undefined (reading 'length')
Thanks.

`
import { MaterialReactTable, useMaterialReactTable, } from "material-react-table";
import { useQuery } from "@tanstack/react-query";
import axios from "axios";
import { columns } from "./columns";

            export const Task = () => {
                const { isLoading, error, data } = useQuery({
                    queryKey: ["task"],
                    queryFn: () =>
                        axios.get("http://localhost:3001/api/task").then((res) => res.data),
                });

                const table = useMaterialReactTable({
                    columns,
                    data
                });

                if (isLoading) return "Loading...";

                if (error) return "An error has occurred: " + error.message;

                return (
                    <>
                        <MaterialReactTable table={table} />{" "}
                    </>
                );
            };

`

[KevinVandy]

Probably because your data is undefined. It needs to be an empty array while loading.

[madrimovganijon]

Thanks Kevin, how can I specify that?

[KevinVandy]

Follow the examples

[madrimovganijon]

ReactQuery example is not working on Sandbox, StackBlitz and CodeSandbox

[madrimovganijon]

If you pass options like this, no errors:

        <MaterialReactTable data={data} columns={columns} />

[madrimovganijon]

Resolved it by adding initialData = [] to useQuery
const { isPending, error, data } = useQuery({ queryKey: ["reportData"], queryFn: () => Axios.get("http://localhost:3001/api/task").then((res) => res.data), initialData: [], });