【Amplify】Fetch data まとめ

2021.12.24

Amplifyで、データ取得の際に、めちゃくちゃよく使うこのリファレンスを分かりやすくまとめました！

Read application data - JavaScript - AWS Amplify Gen 1 Documentation
Learn more about how to read data using Amplify's GraphQL API category. AWS Amplify Documentation
docs.amplify.aws

amplifyではqueries, mutations, subscriptionsを自動でsrc/graphqlフォルダに生成してくれるよ！

fetchを記述するファイルでは、以下のようにまずimportします。

import * as queries from './graphql/queries';
import * as mutations from './graphql/mutations';
import * as subscriptions from './graphql/subscriptions';

補足　見慣れないimportの * が意味するもの

import元のファイルからはいろんな関数がexportされているが、それらを全て、単一のオブジェクトで受け取るという意味

目次
  1. 基本的な使い方
  2. 全件データを取得する
  3. 特定データを取得する
  4. 認証モードの設定方法
  5. Filterの使用

基本的な使い方

ポイントは以下の２点。だけ！

  • APIをimport
  • API.graphqlで実行する

全件データを取得する

Todoテーブルを例に、全てのデータを取得す場合、

queryはlistを使用する。

import { API } from 'aws-amplify';
import * as queries from './graphql/queries';

const allTodos = await API.graphql({ 
  query: queries.listTodos 
});

特定データを取得する

こちらもまたTodoテーブルを例に、 idを指定して特定のTodoを取得する場合

queryはgetを使用する。

import { API } from 'aws-amplify';
import * as queries from './graphql/queries';

const oneTodo = await API.graphql({ 
  query: queries.getTodo, 
  variables: { id: 'some id' }
});

変数 ‘some id’ のところに、特定のid値を入れることで、そのidのTodoを取得することができる。

graphqlOperationを使用して、queryやvariablesの記述を省略することができる

import { API, graphqlOperation } from 'aws-amplify';

const oneTodo = await API.graphql(
　　graphqlOperation(
　　　　queries.getTodo, 
　　　　{ id: 'some id' }
　　)
);

認証モードの設定方法

defaultで認証モードが設定されているため、何かと制限がかかっている。

そのため、認証モードを変更する場合は、authModeを記述する必要があります。

例えば、authModeを以下のように設定した場合、Cognito認証、つまりログインユーザーにのみ権限を与えることが可能。

import { API } from 'aws-amplify';
import * as queries from './graphql/queries';

const oneTodo = await API.graphql({ 
  query: queries.getTodo, 
  variables: { id: 'some id' }
  authMode: 'AMAZON_COGNITO_USER_POOLS'
});

authMode設定は他にもいくつかあり、以下に詳細の記述があります。

Customize authorization rules - JavaScript - AWS Amplify Gen 1 Documentation
Add authorization rules to your GraphQL schema to control access to your data. AWS Amplify Documentation
docs.amplify.aws

Filterの使用

listProductsの中から、priorityが1であるデータを取得する場合、

let filter = {
    priority: {
        eq: 1
    }
};
await API.graphql({ 
　　query: listProducts, 
　　variables: { filter: filter}
});

わざわざfilter使わなくても、getでできそうじゃないですか？？

上記をgetで書くと

await API.graphql({ 
　　query: queries.getProduct, 
　　variables: { priority: '1'}
});

こんなふうに書けそうな気がしますね。

でも、これでは取得出来ないんです。

何がいけないのか？？？

getはidしか取得できない！

そのため、id以外の要素で取得をしたい場合は、listのfilterを使用する。

以上！これでdataのfetchは完璧です！！

コメント