React-apollo: [2.0] apolloClient.writeQuery not update componentProps

Created on 9 Oct 2017  路  6Comments  路  Source: apollographql/react-apollo

Sometime I update store outside React by using writeQuery(), I just try ApolloClient 2.0 everything fine except my component doesn't update after call writeQuery

Intended outcome:
Component props must update data after writeQuery

Actual outcome:
I take a screenshot of my console, in console after writeQuery I call readQuery on my sagas,

after that I log data in my container file from HOC and data from readQuery

screen shot 2017-10-09 at 11 00 51

How to reproduce the issue:

// container
graphql<{ profile: UserProfile }, {}>(Query, {
    options: {
      fetchPolicy: 'cache-and-network'
    },
    props: ({ data, ownProps }) => {
      console.log('data from HOC', data.profile)
      if (data.profile) {
        console.log('data from readQuery', ownProps.client.readQuery({query: Query}).profile)
      }
      return ({ value: data.profile || { firstName: '', lastName: '' } })
    }
  })(FormComponent)
// saga file
      profileQueryResult.profile[fieldName] = value
      apolloClient.writeQuery({
        query: Query,
        data: {
          ...profileQueryResult
        }
      })
      yield put({ type: 'form/updated' })
      console.log(apolloClient.readQuery<{ profile: UserProfile }>({
        query: Query
      }).profile)

Version

Most helpful comment

I thought I am the only one who see this problem.

could you provide some advice for us ? @jbaxleyiii

All 6 comments

This issue has been automatically labled because it has not had recent activity. If you have not received a response from anyone, please mention the repository maintainer (most likely @jbaxleyiii). It will be closed if no further activity occurs. Thank you for your contributions to React Apollo!

I have a similar problem tough I don't use sagas, just calling update() from mutation. The writeQuery call passes checks but nothing gets updated. With previous redux based cache the same function was working well

I thought I am the only one who see this problem.

could you provide some advice for us ? @jbaxleyiii

Update:

I found this bug is relate to apollo client itself https://github.com/apollographql/apollo-client/issues/2415

ALSO COMMIN WITH TEMPORARY WORKAROUND 馃槂

This is my approach for saga

  const { writeQuery, writeFragment } = config.apolloClient
  config.apolloClient.writeFragment = function () {
    writeFragment.apply(config.apolloClient, arguments)
    config.apolloClient.queryManager.broadcastQueries()
  }
  config.apolloClient.writeQuery = function () {
    writeQuery.apply(config.apolloClient, arguments)
    config.apolloClient.queryManager.broadcastQueries()
  }
  // inject apolloClient to sagas

This issue has been automatically labled because it has not had recent activity. If you have not received a response from anyone, please mention the repository maintainer (most likely @jbaxleyiii). It will be closed if no further activity occurs. Thank you for your contributions to React Apollo!

I think this can be close for now due the next version release

https://github.com/apollographql/apollo-client/pull/2574

appreciate !

Was this page helpful?
0 / 5 - 0 ratings