使用阿波罗并做出反应,我想基于(远程)阿波罗查询的结果来更新本地阿波罗状态。
查询的类型为[String!]!
,我的本地状态包含类型为String
的{name}。我想将本地{名称}分配给查询返回的第一项。
const App = compose(
graphql(gql`{ name @client }`, { name: 'localData' }),
graphql(gql`{ currencies { name } }`)
)(({ localData }) => <h1>{ localData.name }</h1>)
我不想使用componentWillReceiveProps
(一旦道具来自远程查询,就在本地状态变化),
我需要使用局部阿波罗状态,而不仅仅是组件的状态,因为此值将被其他组件使用。
我尝试使用props
hoc的graphql
配置,但是感觉和componentWillReceiveProps一样糟糕,并导致无限循环。
有什么主意吗?
"apollo-boost": "^0.1.19",
"apollo-link-state": "^0.4.2",
"react-apollo": "^2.2.4",
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')
)
答案 0 :(得分:0)
我找到了使用Query组件而不是graphql hoc的解决方案。 Query组件具有onCompleted
属性,可以在其中传递用于更新本地状态的函数:
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>)
我发现Query组件不如graphql hoc优雅,但这至少是一个解决方案。