How to use the $filter variable on graphql query under the Connect component?

Question

I have a simple query auto-generated from aws AppSync, and I'm trying to use the Connect Component, with a FlatList and use a TextInput to filter and auto-update the list. But I confess I didn't found out a way to do that... any hints?

Tried to find more information about this without success...

Auto-Generated query:

export const listFood = `query ListFood(
  $filter: ModelFoodFilterInput
  $limit: Int
  $nextToken: String
) {
  listFood(filter: $filter, limit: $limit, nextToken: $nextToken) {
    items {
      id
      name
      description
...

My current code, which I don't quite know where to place my filter value:

            <Connect query={graphqlOperation(queries.listFood)}>
                {
                    ( { data: { listFood }, loading, error } ) => {

                        if(error) return (<Text>Error</Text>);

                        if(loading || !listFood) return (<ActivityIndicator />);

                        return (
                            <FlatList
                                data={listFood.items}
                                renderItem={({item}) => {
                                    return (
                                        <View style={styles.hcontainer}>
                                            <Image source={{uri:this.state.logoURL}}
                                                style={styles.iconImage}
                                            />                                    
                                            <View style={styles.vcontainer}>
                                                <Text style={styles.textH3}>{item.name}</Text>
                                                <Text style={styles.textP}>{item.description}</Text>
                                            </View>
                                        </View>
                                    );
                                }}
                                keyExtractor={(item, index) => item.id}
                            />
                        );


                    }
                }
            </Connect>

What I aim is mainly to filter by item.name, refreshing the list while typing from a TextInput, probably going somewhere on the $filter variable...

Answer 1

Ok, I think I've figured out the usage with the AWS AppSync Out-of-the-box queries...

query MyFoodList{
  listFood(
    filter: {
      name: {
        contains:"a"
      }
    }
  ) {
    items {
      id
      name
    }
  }
}

And it is finally working properly with this disposition on my react-native code:

        <Connect query={ this.state.filter!=="" ? 
                         graphqlOperation(queries.listFood, {
                            filter: {
                                name: {
                                    contains: this.state.filter
                                }
                            }
                         })
                         :
                         graphqlOperation(queries.listFood)

        }>

I still didn't manage to make the sort key work yet... will try a little more and open another topic for it if I didn't get anything...