Zenn
🙆

Amplify Libraries API(GraphQL)/Fetch data

2023/08/06に公開
Amplify
tech

Using Amplify Graphql Client

query declarations

  • amplify cli codegenは自動的にgraphqlのステートメント(query, mutation, subscriptions)を自動生成し、src/graphqlフォルダに格納する。(javascriptの場合)

Simple Query

  • API.graphqlからクエリ呼び出すだけ
import { API } from 'aws-amplify';
import * as queries from './graphql/queries';
import { GraphQLQuery } from '@aws-amplify/api';
import { ListTodosQuery, GetTodoQuery } from './API';

// Simple query
const allTodos = await API.graphql<GraphQLQuery<ListTodosQuery>>(
  { query: queries.listTodos }
);
console.log(allTodos); // result: { "data": { "listTodos": { "items": [/* ..... */] } } }

// Fetch a single record by its identifier
const oneTodo = await API.graphql<GraphQLQuery<GetTodoQuery>>({
  query: queries.getTodo,
  variables: { id: 'some id' }
});
  • graphqlOperation 関数でこのように整地することもできる
import { API, graphqlOperation } from 'aws-amplify';
import { GraphQLQuery } from '@aws-amplify/api';
import { GetTodoQuery } from './API';
// ...

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

フィルタリングとページネーション

  • 自動生成された/graphqlフォルダに以下のような記述がある
listTodos(
  filter: ModelTodoFilterInput
  limit: Int
  nextToken: String): ModelTodoConnection

input ModelTodoFilterInput {
    id: ModelIDInput
    priority: ModelIntInput
    # ... all your other Todo fields here
    and: [ModelTodoFilterInput]
    or: [ModelTodoFilterInput]
    not: ModelTodoFilterInput
}

クエリのフィルタリング

  • スキーマのinput typesにはどのような種類のフィルタリングが実行できるかが示されている。以下は例
input ModelIntInput {
  ne: Int # "not equal to"
  eq: Int # "equal to"
  le: Int # "less than or equal to"
  lt: Int # "less than"
  ge: Int # "greater than or equal to"
  gt: Int # "greater than"
  between: [Int]
  attributeExists: Boolean
  attributeType: ModelAttributeTypes
}

import { ListTodosQueryVariables, ListTodosQuery } from './API';

const variables: ListTodosQueryVariables = {
  filter: {
    priority: {
      eq: 1
    }
  }
};

await API.graphql<GraphQLQuery<ListTodosQuery>>({ 
  query: listTodos, variables: variables 
});

Compound Filters 複合フィルター

  • and or notなどのbooleanのロジックを組み合わせることができる。
import { ListTodosQueryVariables, ListTodosQuery } from './API';

const variables: ListTodosQueryVariables = {
  filter: {
    or: [
      { priority: { eq:1 } },
      { priority: { eq:2 } }
    ]
  }
};

await API.graphql<GraphQLQuery<ListTodosQuery>>({ 
  query: listTodos, variables: variables 
});

Pagination Queries

  • appsyncのページネーションは制限付きのリクエストを行い、クエリの次のページのカーソルを取得するためにnextTokenを返すことで行われます。
import { ListTodosQueryVariables, ListTodosQuery } from './API';

// Fetch first 20 records
const variables: ListTodosQueryVariables = {
  limit: 20, 
  // add filter as needed
};

const res = await API.graphql<GraphQLQuery<ListTodosQuery>({ 
  query: listTodos, variables: variables
});

const { items: itemsPage1, nextToken } = res.data?.listTodos;

// Fetch the next 20 records
variables.nextToken = nextToken;

const res = await API.graphql<GraphQLQuery<ListTodosQuery>({ 
  query: listTodos, variables: variables 
});

const { items: itemsPage2 } = res.data?.listTodos;

Discussion