如何解决如何使用Apollo和GraphQL通过React Hooks更新List组件?
我正在构建一个Shopify应用程序,该应用程序使用react / node / graphql / apollo,并具有一个 Polaris ResourceList 组件,其中填充了来自 GraphQL 查询的数据。我实现了分页功能,并且正在使用fetchMore
和updateQuery
,所以工作正常。但是,现在我正尝试添加filter
功能,以便在用户搜索时像自动填充字段一样查询列表。
Here is the ResourceList documentation from Polaris that describes the filter option.
Here is the Filter option from Polaris.
如何使用Apollo / GraphQL实施此操作?
我应该在 handleFiltersQueryChange 函数中添加什么?
这是我的ResourceList:
const handleFiltersQueryChange = useCallback(
(value) => setQueryValue(value),[],);
...
<ResourceList
showHeader
filterControl={
<Filters
queryValue={queryValue}
filters={filters}
appliedFilters={appliedFilters}
onQueryChange={handleFiltersQueryChange}
onQueryClear={handleQueryValueRemove}
onClearAll={handleFiltersClearAll}
/>
}
items={data.products.edges}
promotedBulkActions={promotedBulkActions}
resourceName={resourceName}
renderItem={renderItem}
selectedItems={selectedItems}
onSelectionChange={setSelectedItems}
/>
这是我的GraphQL过滤器查询:
const GET_FILTERED_PRODUCTS = gql`
query($filter: String){
products(first:25,query:$filter) {
pageInfo {
hasNextPage
hasPreviousPage
}
edges {
cursor
node {
id
title
handle
description
productType
images(first: 1) {
edges {
node {
originalSrc
altText
}
}
}
variants(first: 1) {
edges {
node {
taxCode
price
id
taxable
}
}
}
}
}
}
}
`
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。