У меня есть список продуктов из базы данных, и я хочу обновить список, запросив продукты с передачей некоторых параметров фильтра в компонент Query в качестве переменных.
проблема заключается в том, что я использую refetch из компонента Query, который он отображаетцелые компоненты, содержащиеся в компоненте 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>
)
}