Apollo React客户端-查询组件在第一个道具/变量更改时没有到达后端-在所有后续更改中都到达后端

Question

I have an Apollo Query component. Its query variables are defined by a page component via a query string on the URL then passed down to the Query component via props.

The component that contains the Query is represented by this 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>
    )
  }
}

On first fetch (via props created from URL query string), the query fires correctly and returns the results fine:

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"}]

However on the first change of props (second set of query variables) the query doesn't fire - it does not reach the back end at all. Though the variables passed to the query are correct:

PROPS {"brand":["Google"]}

VARIABLES {"brand":["Google"]}

DATA {}

SEARCH PRODUCTS undefined

However, on the next change of props, and all subsequent changes - the Query fires properly.

I can't figure out what would cause the query to not fire, despite receiving correct new variables.

I have tried fetchPolicy='network-only' on the Query component, that doesn't fix the issue.

Answer 1

can you add mapStateToProps and maintain a state i think your props change cant be seen by Query component and above props are been shollow checked that can be another reason . in your object keys are same am not sure about that .

After reading i believe that you want changes in rendered component. So just try to trigger the rerender by changing the state or props change but make sure dont change the state in wrong way that can lead you ti infinite loop.

I think mapStateToProps is quite good option just try that.

also tell me how how did you change the props means where is the event handled .

at last please forgive me if i got you wrong . Happy to help :)