-
-
Notifications
You must be signed in to change notification settings - Fork 5.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Explain additional steps needed to use useGetIdentity() #9844
base: master
Are you sure you want to change the base?
Conversation
docs/useGetIdentity.md
Outdated
@@ -23,7 +23,7 @@ Once loaded, the `data` object contains the following properties: | |||
const { id, fullName, avatar } = data; | |||
``` | |||
|
|||
`useGetIdentity` uses [react-query's `useQuery` hook](https://tanstack.com/query/v3/docs/react/reference/useQuery) to call the `authProvider`. | |||
`useGetIdentity` uses [react-query's `useQuery` hook](https://tanstack.com/query/v3/docs/react/reference/useQuery) to call the `authProvider`. This means you will need to wrap the component where you want to use it in a react-query `<QueryClientProvider>` with a default `QueryClient`. To use `useGetIdentity()` in your `App.tsx` you wrap it in `index.tsx`. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't understand this precision. Perhaps you could share an example of the code you had and the error it produced?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
docs/useGetIdentity.md
Outdated
@@ -46,6 +46,8 @@ const PostDetail = ({ id }) => { | |||
} | |||
``` | |||
|
|||
**Tip**: This hook requires the component where it is used to be wrapped in a react-query `<QueryClientProvider>` with a default `QueryClient`. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Better? I am just trying to help people (like myself) getting started with you system to not get stuck on this like I did.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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 samequeryClient
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.
Add some required usage details that would have saved me a couple of hours if I had known.