Question

我有一个从aws AppSync自动生成的简单查询，并且我正在尝试使用带有FlatList的Connect Component，并使用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
    }
  }
}

终于可以在我的本机代码上使用此配置正常工作了

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

        }>

我仍然没有设法使sort键起作用...如果我什么都没得到，将尝试更多并为此打开另一个主题...

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变量？

2 个答案: