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

This is filter in use in React / Javascript:

const [findPage, setFindPage] = useState('') // setup

async function findpoints() {
  // find user & page if exists read record
  try {
    const todoData = await API.graphql(graphqlOperation(listActivitys, {filter : {owner: {eq: props.user}, page: {eq: action}}}))
    const pageFound = todoData.data.listActivitys.items // get the data
    console.log('pageFound 1', pageFound)
    setFindPage(pageFound) // set to State
  } catch (err) {
    console.log(err)
  }
}

The async / wait approach means the code will try to operate, and move on to other areas of your code putting data into findPage through setFindPage when and if it finds data

Answer 2

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...