如何使用ApolloConsumer手动运行查询后更新现金？

Question

我有一个来自数据库的产品列表，并希望通过查询产品来更新列表，并将一些过滤器参数作为变量传递给查询组件。

问题是，当我使用refetch from Query component时，它会呈现包含在Query component <Filter /> <ProductList />中的整个组件，并且我正在丢失这些组件的先前状态，因为呈现的原因如下面的代码所示

  return (
    <Query
      query={GET_FILTER_QUERY}
      pollInterval={160000}
      variables={{ input: {} }}
    >
      {({ loading, error, data, refetch }) => {
        if (loading) return null
        if (data) {
          return (
            <Fragment>
              <Filter refetch={refetch} filterData={data} />
              <ProductList products={data} />
            </Fragment>
          )
        }
      }}
    </Query>
  )
}

在提交表单的过滤器组件中，我调用refetch，如下所示

onSubmit={async formValue => { refetch({ input: formValue }) }}

由于这个问题，我使用<ApolloConsumer>手动运行查询，但不能使用<ApolloConsumer>的客户端更新现金，而不是重新获取

  const { brands, types, suppliers, tags } = props.filterData
  const { refetch } = props

  const mutators = {
    setSelector: (args, state, utils) => {
      utils.changeValue(state, args[0].key, () => args[0].value)
    }
  }

  return (
    <ApolloConsumer>
      {client => (
        <div className="row mt-5 mb-5">
          <FinalForm
            onSubmit={async formValue => {
              // refetch({ input: formValue })
              const { data } = await client.query({
                query: GET_FILTER_QUERY,
                variables: { input: formValue }
              })

              // const stores = client.readQuery({ query: GET_PRODUCTS_QUERY })

              return client.writeQuery({
                query: GET_FILTER_QUERY,
                data: {
                  getfilterProducts: data.getfilterProducts
                }
              })
              // console.log(stores)
            }}
            mutators={mutators}
            render={({ handleSubmit, form, values }) => (
              <form onSubmit={handleSubmit} noValidate>
                <div className="filter-controll">
                  <div className="filter-control-options">
                    <ul className="sellect-group">
                      <li>
                        <SearchBox
                          onChange={e => {
                            form.mutators.setSelector({
                              key: 'text',
                              value: e.target.value
                            })
                          }}
                        />
                      </li>
                    </ul>
                    <ul className="sellect-group">
                      <li>
                        <Select
                          name="type"
                          classNamePrefix="fiter-select"
                          className="filter-select"
                          options={types}
                          placeholder="Product type"
                          isClearable
                          onChange={type => {
                            form.mutators.setSelector({
                              key: 'type',
                              value: type.value
                            })
                          }}
                        />
                      </li>
                    </ul>
                    <ul className="sellect-group">
                      <li>
                        <Select
                          classNamePrefix="fiter-select"
                          className="filter-select"
                          options={brands}
                          placeholder="All brands"
                          onChange={brand => {
                            form.mutators.setSelector({
                              key: 'brand',
                              value: brand.value
                            })
                          }}
                        />
                      </li>
                    </ul>
                    <ul className="sellect-group">
                      <li>
                        <Select
                          classNamePrefix="fiter-select"
                          className="filter-select"
                          options={suppliers}
                          placeholder="All suppliers"
                          onChange={supplier => {
                            form.mutators.setSelector({
                              key: 'supplier',
                              value: supplier.value
                            })
                          }}
                        />
                      </li>
                    </ul>
                    <ul className="sellect-group">
                      <li>
                        <Select
                          classNamePrefix="fiter-select"
                          className="filter-select"
                          options={tags}
                          placeholder="All tags"
                          isMulti
                          onChange={type => {
                            form.mutators.setSelector({
                              key: 'tags',
                              value: type.map(type => type.value)
                            })
                          }}
                        />
                      </li>
                    </ul>
                    <ul className="sellect-group ml-5x">
                      <li>
                        <Button type="submit">Apply filter</Button>
                      </li>
                    </ul>
                  </div>
                </div>
              </form>
            )}
          />
        </div>
      )}
    </ApolloConsumer>
  )
}

Answer 1

我通过使用查询组件updateQuery render prop函数解决了这个问题。

onSubmit={async formValue => {
              const { data } = await client.query({
                query: GET_FILTER_QUERY,
                variables: { input: formValue }
              })

              props.updateQuery((prev, { fetchMoreResult }) => {
                return { ...data }
              })
            }}