Explain additional steps needed to use useGetIdentity()

[JesperWe]

Add some required usage details that would have saved me a couple of hours if I had known.

[fzaninotto]

I don't understand this precision. Perhaps you could share an example of the code you had and the error it produced?

[JesperWe]

Adding this hook to an app that does not use QueryClientProvider makes the app crash. If you are not familiar with react-query the original text about the hook using it is not helpful in resolving the problem.

[fzaninotto]

I think this tip adds confusion more than it helps. In 90% of the cases, adding a QueryClientProvider isn't necessary. It's only useful when using the hook directly in <Admin>. Your tip should clarify that.

[JesperWe]

Better? I am just trying to help people (like myself) getting started with you system to not get stuck on this like I did.

[slax57]

Better? I am just trying to help people (like myself) getting started with you system to not get stuck on this like I did.

We totally understand this and highly appreciate your will to contribute! 🙂

But on the other hand, we need to keep a good balance in our documentation between general usage advice and use-case specific tips. It's no easy task and requires many iterations, that's why we are here to provide guidance with the help of the experience we have acquired by writing docs for several years now.

Now, I still find your latest iteration a bit unclear. So I tried to rewrite it myself to suggest a version closer to what I have in mind.

Here's what I've got so far (to be added to the Usage section):

Usage Outside Of The <Admin> Component

useGetIdentity needs to be used inside a <QueryClientProvider>. It will be the case if you call it inside the <Admin> Component. However if you need to call it outside of it, you will have to wrap your your component in a <QueryClientProvider> and provide the same queryClient to it:

import { Admin } from 'react-admin';
import { QueryClient } from 'react-query';
import { dataProvider } from './dataProvider';

const queryClient = new QueryClient();

const MyIdentity = () => {
    const { data: identity, isLoading } = useGetIdentity();
    if (isLoading) return <>Loading...</>;
    return <div>{identity.fullName}</div>;
}

const App = () => (
    <>
        <QueryClientProvider client={queryClient}>
            <MyIdentity />
        </QueryClientProvider>
        <Admin queryClient={queryClient} dataProvider={dataProvider}>
            ...
        </Admin>
    </>
);

However, this raised a question: calling useGetIdentity outside <Admin> makes it impossible for the hook to have access to the authProvider. So this snippet can't work. How did you solve that issue?

Can you share the code you have so far?

Thanks.