react-adopt
react-adopt copied to clipboard
How to wait for Query result
I would like to use React Adopt with Formik and Apollo Client. I am getting initial form data in getUser
but first time I am getting empty data
object with loading
flag, and when the result came back from server, loading
flag turn to false and I get the result. Using following snippet, Formik always initialised with empty array, because rendering Formik doesn't wait for loading=false.
const Composed = adopt({
getUser: ({ render }) => <Query query={CURRENT_USER_PROFILE_QUERY} children={render}/>,
updateUser: ({ render }) => <Mutation mutation={CURRENT_USER_UPDATE_MUTATION}
children={render}/>,
form: ({ render, updateUser, getUser }) =>
<Formik initialValues={{ ...formDefaultValue, ...getUser.data.me }} children={render} />,
});
Without React Adopt my code looks like this:
<Query query={CURRENT_USER_PROFILE_QUERY}>
{({ loading, error, data }) => {
if (!loading) return (
<Formik initialValues={{ ...formDefaultValue, ...data.me }}>
How can I achieve it with React Adopt?
If you dont use mapProps
, then you can use getUser.loading
or getUser.error
.
If you dont use
mapProps
, then you can usegetUser.loading
orgetUser.error
.
But apparently not within in the render function where Composed is used. I also did not find any documentation that would support this claim.