pedronauck / react-adopt

:sunglasses: Compose render props components like a pro
MIT License
1.68k stars 56 forks source link

How to wait for Query result #33

Open landorid opened 5 years ago

landorid commented 5 years ago

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?

morexlt commented 5 years ago

If you dont use mapProps, then you can use getUser.loading or getUser.error.

manonthemat commented 5 years ago

If you dont use mapProps, then you can use getUser.loading or getUser.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.