javascript - Apollo React 客户端 - 查询组件在第一次 props/variables 更改时不会到达后端 - 在所有后续更改上都会到达后端

Question

我有一个 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'，但这并不能解决问题。

Answer 1

你可以添加mapStateToProps并维持一个状态吗？我认为查询组件看不到你的 Prop 更改，并且上面的 Prop 经过了浅层检查，这可能是另一个原因。你的对象键是相同的我不确定。

读完后，我相信您希望更改渲染的组件。因此，只需尝试通过更改状态或 Prop 更改来触发重新渲染，但请确保不要以错误的方式更改状态，否则可能会导致无限循环。

我认为mapStateToProps是一个很好的选择，试试吧。

还告诉我你如何更改 Prop 意味着事件在哪里处理。

最后，如果我理解错了，请原谅我。很乐意提供帮助:)