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

One more thing, I wanted to sort it by name... :-) – rdrgtec Aug 16 '19 at 19:29 — rdrgtec, Aug 16 '19 at 19:29

rdrgtec · Accepted Answer · 2019-08-22T12:24:21.123

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

Thanks, very helpful question/answer. I'm new on graphQL, and I saw this other question also about query with filter, and instead of `contains` it uses `eq`, but where does these query options come from? Amplify or GraphQL? https://stackoverflow.com/questions/53947508/how-to-do-filteration-in-aws-amplify-graphql-client — Lucas Andrade, Jun 24 '20 at 22:57

score 0 · Answer 2 · answered Jul 08 '20 at 17:08

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

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

2 Answers2