Update local config based on query result in react-apollo

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')
)

Carlos Vázquez Carlos Vázquez · Accepted Answer · 2018-11-23T13:34:14

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.

Update local config based on query result in react-apollo

Relevant versioning:

Code

1 Answers