ResourceList Filter Example needed with actual data that works with GraphQL

[Jroyce1180]

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. 

queryValue={queryValue}

onQueryChange={handleFiltersQueryChange}

In the Shopify example this fires the handleFiltersQueryChange:

const handleFiltersQueryChange = useCallback(

    (value) =>setQueryValue(value),

    []

  );

Can someone example how this works and when I am supposed to call my GraphQL query? 

[hkfong]

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.

[tobjay · 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

[Firechant]

This is pretty simple if all you are doing is loading data in memory and filtering on it. What if you say have a list of 20000 customers and want to filter the gql query every time new filters are submitted? 

[barrettjkev]

You can try using useLazyQuery from GraphQL