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

Question

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

问题是当我从 Query 组件使用 refetch 时，它会渲染整个组件，包含在 Query 组件中<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>
  )
}

标签： javascriptreactjsreact-apolloapollo-client

Answer 1

我通过使用 Query 组件updateQuery渲染道具功能解决了这个问题。

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

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