useGetList on Dashboard breaks when logging out

What you were expecting: Data displayed on a dashboard page and fetched with the useGetList hook should remain consistent and not cause problems when logging out.

What happened instead: When logging out, ids are still filled after re-render, but the data object yields an empty Object. This causes errors if data is rendered like in the useGetList example code in the documentation: https://marmelab.com/react-admin/Actions.html

IDs and data should be consistent!

Steps to reproduce: In case the code sandbox link below shouldn’t be available anymore: I changed the “tutorial” example to load and display data on the dashboard, like so:

import * as React from "react";
import { useGetList } from "react-admin";
import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import CardHeader from "@material-ui/core/CardHeader";

export default () => {
  const { data, ids, loading, error } = useGetList(
    "posts",
    {
      page: 1,
      perPage: 10
    },
    { field: "published_at", order: "DESC" }
  );
  console.log("######### ids = ", ids, "\n######## data = ", data);
  return (
    <Card>
      <CardHeader title="Welcome to the administration" />
      <CardContent>Lorem ipsum sic dolor amet...</CardContent>
      {!loading && !error && (
        <>
          {ids.map((id) => (
            <p>
              {id}: {data[id].title}
            </p>
          ))}
        </>
      )}
    </Card>
  );
};

When logging out, ids are still present but data becomes an empty object, which breaks the data lookup. The console output looks like this:

######### ids =  
(10) [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

######## data =  
{}

Related code: See code sandbox: https://codesandbox.io/s/elegant-volhard-funkp?file=/src/Dashboard.js

Environment

• React-admin version: ^3.9.0

[fzaninotto]

No, the problem is that the ids and data selectors don’t run together and we can fix it in react-admin. Fix incoming.

[fzaninotto]

No, the bug is in useQueryWithStore. When the data and total selectors return something new, useQueryWithStore runs an effect which then updates the data and total returned by the hook… but at the next tick.

I’m afraid we need a useLayoutEffect here.