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

Posted 2023-03-08

【中文标题】如何在 Connect 组件下的 graphql 查询中使用 $filter 变量？

【英文标题】：How to use the $filter variable on graphql query under the Connect component?

【发布时间】：2019-12-23 02:15:01

【问题描述】：

我有一个从 aws AppSync 自动生成的简单查询，我正在尝试将 Connect 组件与 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 变量的某个地方...

【问题讨论】：

还有一件事，我想按名称排序... :-)

【参考方案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)

        >

我仍然没有设法使排序键工作......如果我没有得到任何东西，我会尝试更多并为它打开另一个主题......

【讨论】：

谢谢，非常有帮助的问题/答案。我是 graphQL 的新手，我也看到了关于使用过滤器查询的另一个问题，而不是 contains 它使用 eq，但是这些查询选项来自哪里？放大还是 GraphQL？ ***.com/questions/53947508/…

【参考方案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