Update local config based on query result in react-apollo - graphql

Question

Using apollo and react, I want to update my local apollo state based on the result of a (remote) apollo query.
The query is of type [String!]!, my local state contains { name } of type String. I want to assign the local { name } to the first item returned by the query.
const App = compose(
graphql(gql`{ name #client }`, { name: 'localData' }),
graphql(gql`{ currencies { name } }`)
)(({ localData }) => <h1>{ localData.name }</h1>)
I don't want to use componentWillReceiveProps (mutating there the local state as soon as props come from the remote query), as it's bad practice.
I need to use local apollo state, not just the state of the component, as this value is going to be used by other components.
I tried using the props config of the graphql hoc, but it feels as bad as componentWillReceiveProps, and lead to an infinite loop.
Any idea?
Relevant versioning:
"apollo-boost": "^0.1.19",
"apollo-link-state": "^0.4.2",
"react-apollo": "^2.2.4",
Code
import React from 'react'
import ReactDOM from 'react-dom'
import ApolloClient from 'apollo-boost'
import gql from 'graphql-tag'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { ApolloProvider, graphql, compose } from 'react-apollo'
import { ApolloLink } from 'apollo-link'
import { withClientState } from 'apollo-link-state'
import { HttpLink } from 'apollo-link-http'
const resolvers = {
Mutation: {
updateName: (ops, { name }, { cache }) => cache.writeData({ data: { name } })
}
}
const typedefs = gql`
type Query {
name: String
}
type Mutation {
updateName(name: String): String
}
`
const defaults = { name: 'defaultName' }
const cache = new InMemoryCache()
const stateLink = withClientState({
cache,
defaults,
resolvers
});
const apolloClient = new ApolloClient({
uri: '/store/api/graphql',
link: ApolloLink.from([stateLink, new HttpLink()]),
cache,
clientState: {
defaults,
resolvers,
typedefs
}
})
const App = compose(
graphql(gql`{ name #client }`, { name: 'localData' }),
graphql(gql`{ currencies { name id } }`)
)(({ localData }) => <h1>{ localData.name }</h1>)
ReactDOM.render(
<ApolloProvider client={ apolloClient }>
<App />
</ApolloProvider>,
document.getElementById('app')
)

Answer 1

I found a solution using the Query component instead of the graphql hoc. The Query component has the onCompleted property, where I can pass a function that updates the local state:
const UPDATE_NAME = gql`mutation ($name: String) {
updateName (name: $name) #client { name }
}`
const App = compose(
withApollo,
graphql(gql`{ name #client }`, { name: 'localData' })
)(({ client, localData }) => <Query
query={ gql`{ currencies { name id } }` }
onCompleted={ data =>
client.mutate({
mutation: UPDATE_NAME,
variables: { name: data.currencies[0].name }
})
}>
{
() => <h1>Current: { localData.name }</h1>
}
</Query>)
I find the Query component less elegant than the graphql hoc, but at least is a solution.