要在不同的视图中列出所有元素并过滤所有者的元素,可以使用AWS Amplify的GraphQL查询。
首先,在Amplify项目中安装并配置AWS Amplify CLI和GraphQL API。然后在项目中启用GraphQL API。
接下来,您需要定义一个GraphQL模型,该模型包含要查询的元素的属性。以下是一个示例模型的代码:
type Item @model @auth(rules: [{ allow: owner }]) {
id: ID!
name: String!
owner: String!
}
然后,使用Amplify CLI生成代码来处理GraphQL操作。运行以下命令:
amplify codegen models
该命令将自动生成与模型相关的GraphQL操作的代码。
接下来,在您的视图组件中使用以下代码来执行GraphQL查询并过滤所有者的元素:
import React, { useEffect, useState } from "react";
import { API, graphqlOperation } from "aws-amplify";
import { listItems } from "./graphql/queries";
const MyComponent = () => {
const [items, setItems] = useState([]);
useEffect(() => {
fetchItems();
}, []);
const fetchItems = async () => {
try {
const { data } = await API.graphql(graphqlOperation(listItems));
const filteredItems = data.listItems.items.filter(
(item) => item.owner === "someOwner"
);
setItems(filteredItems);
} catch (error) {
console.log("Error fetching items", error);
}
};
return (
{items.map((item) => (
{item.name}
))}
);
};
export default MyComponent;
在上面的代码中,我们使用listItems操作从GraphQL API中获取所有元素。然后,我们使用filter函数过滤出属于特定所有者的元素,并将结果存储在items状态中。最后,我们将过滤后的元素渲染到视图中。
请记得根据您自己的需求更改模型和过滤条件。这只是一个示例,您可以根据您的应用程序的要求进行更改。