Usage with apollo

Hi,

Thanks for your work in this repo. It is a very intuitive library. I am trying to incorporate it with apollo but I am having a bit of trouble. The example in the next.js repo seems to do its own memoization of the store creation and explicit creation on the server side so I feel like it is difficult to incorporate with this library. Could you point me in the right direction on how I could do it and help out? Here is the example apollo HOC in the next.js repo.

It seems there is only one extra step - waiting for Apollo to return with data while in getInitialProps.

      // Run all GraphQL queries in the component tree
      // and extract the resulting data
      if (!process.browser) {
        const apollo = initApollo()
        const redux = initRedux(apollo)
        // Provide the `url` prop data in case a GraphQL query uses it
        const url = {query: ctx.query, pathname: ctx.pathname}

        try {
          // Run all GraphQL queries
          await getDataFromTree(
            // No need to use the Redux Provider
            // because Apollo sets up the store for us
            <ApolloProvider client={apollo} store={redux}>
              <ComposedComponent url={url} {...composedInitialProps} />
            </ApolloProvider>
          )
        } catch (error) {
          // Prevent Apollo Client GraphQL errors from crashing SSR.
          // Handle them in components via the data.error prop:
          // http://dev.apollodata.com/react/api-queries.html#graphql-query-data-error
        }
        // getDataFromTree does not call componentWillUnmount
        // head side effect therefore need to be cleared manually
        Head.rewind()

        // Extract query data from the store
        const state = redux.getState()

        // No need to include other initial Redux state because when it
        // initialises on the client-side it'll create it again anyway
        serverState = {
          apollo: { // Only include the Apollo data state
            data: state.apollo.data
          }
        }
      }

Thanks!

[mrwillis]

@mattbrunetti Nice work. That looks pretty solid. Yes I think that would be really useful. I would be happy to help out with that. I feel like a lot of people are using apollo and redux together.

[mrwillis]

I added some notes here on how to use redux with apollo. As @mattbrunetti said, you are free to use redux inside the apollo container because of how withData is created. I gave an example in the README. If you want to additionally do some redux state initialization, see @mattbrunetti’s comment 😃