我有一个 Apollo 查询组件。它的查询变量由页面组件通过 URL 上的查询字符串定义,然后通过 props 传递到查询组件。
包含查询的组件由此 MWE 表示:
import React, { Component } from 'react'
// gql stuff
import gql from 'graphql-tag'
import { Query } from 'react-apollo'
const GET_SEARCH_RESULTS = gql`
query searchProducts($brand: [String]) {
searchProducts(brand: $brand) {
id
name
brand
}
}
`
export default class SearchResults extends Component {
render () {
const variables = {
...this.props.searchQuery
}
return (
<Query
query={GET_SEARCH_RESULTS}
variables={variables}
fetchPolicy='cache-and-network'
>
{({ loading, error, data, variables }) => {
if (loading) {
return <div>Loading...</div>
}
if (error) {
return <div>ERROR: {JSON.stringify(error)}</div>
}
const { searchProducts } = data
return (
<div>
<div>{'PROPS ' + JSON.stringify(this.props.searchQuery)}</div>
<div>{'VARIABLES ' + JSON.stringify(variables)}</div>
<div>{'DATA ' + JSON.stringify(data)}</div>
<div>{'SEARCH PRODUCTS ' + JSON.stringify(searchProducts)}</div>
</div>
)
}}
</Query>
)
}
}
第一次获取时(通过从 URL 查询字符串创建的 props),查询会正确触发并正常返回结果:
PROPS {"brand":["Apple"]}
VARIABLES {"brand":["Apple"]}
DATA {"searchProducts": [{"id":5, "name": "Test", "brand": "Apple", "__typename":"Product"}]}
SEARCH PRODUCTS [{"id":5, "name": "Test", "brand": "Apple", "__typename":"Product"}]
但是,在第一次更改 props(第二组查询变量)时,查询不会触发 - 它根本不会到达后端。尽管传递给查询的变量是正确的:
PROPS {"brand":["Google"]}
VARIABLES {"brand":["Google"]}
DATA {}
SEARCH PRODUCTS undefined
但是,在下一次更改 Prop 以及所有后续更改时,查询会正确触发。
尽管收到了正确的新变量,但我无法弄清楚什么会导致查询不触发。
我已在查询组件上尝试 fetchPolicy='network-only'
,但这并不能解决问题。
最佳答案
你可以添加mapStateToProps并维持一个状态吗?我认为查询组件看不到你的 Prop 更改,并且上面的 Prop 经过了浅层检查,这可能是另一个原因。 你的对象键是相同的我不确定。
读完后,我相信您希望更改渲染的组件。 因此,只需尝试通过更改状态或 Prop 更改来触发重新渲染,但请确保不要以错误的方式更改状态,否则可能会导致无限循环。
我认为mapStateToProps是一个很好的选择,试试吧。
还告诉我你如何更改 Prop 意味着事件在哪里处理。
最后,如果我理解错了,请原谅我。 很乐意提供帮助:)
关于javascript - Apollo React 客户端 - 查询组件在第一次 props/variables 更改时不会到达后端 - 在所有后续更改上都会到达后端,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54890768/