如何在 Connect 组件下的 graphql 查询中使用 $filter 变量？

Question

我有一个从 aws AppSync 自动生成的简单查询，我正在尝试使用连接组件和 FlatList，并使用 TextInput 来过滤和自动更新列表。但我承认我没有找到这样做的方法...有什么提示吗？

试图找到更多关于此的信息但没有成功...

自动生成的查询：

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

我目前的代码，我不太清楚在哪里放置我的过滤器值：

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

我的目标主要是通过 item.name 进行过滤，在从 TextInput 键入时刷新列表，可能会在 $filter 变量上的某个位置...

Answer 1

好的，我想我已经了解了 AWS AppSync 开箱即用查询的用法...

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

它终于可以在我的 react-native 代码上正常工作了：

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

        }>

我仍然没有设法使排序键起作用...如果我没有得到任何东西，我会再尝试一下并为其打开另一个主题...

Answer 2

这是在 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)
  }
}

异步/等待方法意味着代码将尝试运行，并继续执行代码的其他区域，在找到数据时通过 setFindPage 将数据放入 findPage

如何在 Connect 组件下的 graphql 查询中使用 $filter 变量？

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

graphql

react-native

aws-appsync

aws-amplify