ResourceList Filter Example needed with actual data that works with GraphQL

85 4 14

I'm new to using GraphQL and want to implement filters on my ResourceList. I followed the example from the Polaris documentation however I haven't seen any documentation or example that shows how the GraphQL query using a filter term such as "title" connects with the ResourceList filterControl.

Specifically, when someone types in something in the filter, it goes into the "queryValue" variable below. And I assume the onQueryChange then is fired. 

In the Shopify example this fires the handleFiltersQueryChange:
const handleFiltersQueryChange = useCallback(
Can someone example how this works and when I am supposed to call my GraphQL query? 
New Member
1 0 0

Hi, did you figure out how this works?  I'm trying to do something similar to you, but not sure if I need to add my own code to filter my ResourceList items based on the query, or if that is built in to the Polaris code.  The Polaris example docs don't seem to properly filter their ResourceList either, so I can't find a good example to follow.

New Member
2 2 4

This is an accepted solution.

Late to the party, and maybe not with the best solution after all.

But here is what i've done to make the filters work (somehow at least):

I built my query just once, on the page component as always, using 

const {data, loading, error} = useQuery(MY_GQL_QUERY, options)

and mapped the query data to resourcelist.items prop.

then I went with client side array filtering, because the page loading already triggered the whole query and with the filters i just needed a subset of the already queried items.

const _items = data?.items  
const filteredItems = !isEmpty(queryValue) ? _items.filter(i => (i.title.includes(queryValue))) : _items

 Here I am using queryValue state, like the shopify examples demonstrate.

Hope this helps anyhow