使用GraphQL选择用户并获取数据
2023年1月8日作成:
本文是以下文章的延续「使用React Navigation添加个人资料页面」。
我正在使用React Native + Expo + Amplify + NativeBase + React Navigation进行应用程序原型制作。
用于GraphQL的筛选
在当前的代码中,通过GraphQL一次性获取了三个用户(taro、jiro、hanako)的数据,然后通过data[0]指定显示jiro的数据。
我们将使用GraphQL的过滤器来获取并显示仅属于已登录用户(user.username)的数据。我们将使用graphqlOperation来实现。
async function fetchData1() {
const opt = {
filter: {name: {eq: user.username}},
};
API.graphql(graphqlOperation(listPeople,opt)).then(values=> {
setData1(values.data.listPeople.items);
});
}
从登录信息中获取用户信息
请在App.js中添加以下代码(App.js的GitHub链接:qiita20230108)。
function HomeScreen() {
...
const { user, signOut } = useAuthenticator((context) => [context.user])
...
{`Welcome, ${user.username} !!!`}
...
function ProfileScreen() {
...
const opt = {
filter: {name: {eq: user.username}},
};
我已经说完了。
授权用户访问