Zenn
Closed1

【Next.js, Amplify, GraphQL】 一覧データ取得と絞り込み方法

GraphQL
Next.js
Amplify
hirohiro

何について書く？

  • Amplifyのqueryでのデータの取得方法

内容

  • 前提条件：Amplifyを使用してNext.jsのアプリを作ってます。
  • schema.graphqlによって自動生成されたqueries.tsからデータを取得していきます。
    ①schema.graphqlファイルの内容です。
type Test @model {
  id: ID!
  name: String!
  completed: Boolean!
  timestamp: AWSTimestamp!
}

②自動生成されるqueries.tsファイルの内容です。

export const getTest = /* GraphQL */ `
  query GetTest($id: ID!) {
    getTest(id: $id) {
      id
      name
      completed
      timestamp
      createdAt
      updatedAt
    }
  }
`;
export const listTests = /* GraphQL */ `
  query ListTests(
    $filter: ModelTestFilterInput
    $limit: Int
    $nextToken: String
  ) {
    listTests(filter: $filter, limit: $limit, nextToken: $nextToken) {
      items {
        id
        name
        completed
        timestamp
        createdAt
        updatedAt
      }
      nextToken
    }
  }
`;

③-1 Next.jsアプリからのデータを呼び出す方法（全件取得）

const asyncFunc = async () => {
      const result = (await API.graphql(
        graphqlOperation(listTests)
      )) as GraphQLResult<ListCompanysQuery>
    setTests(result.data.listTests.items) //←私はRecoilのグローバルステートの保存してます。
    }

③-1 Next.jsアプリからのデータを呼び出す方法（フィルタリングして取得）

const asyncFunc = async () => {
      const result = (await API.graphql(
      const filter = {
        name: {
          'eq': 'aaa' //nameでaaaと一致するものに絞り込んでくれます。
        }
      }
        graphqlOperation(listTests, {filter: filter})
      )) as GraphQLResult<ListCompanysQuery>
    setTests(result.data.listTests.items) //←私はRecoilのグローバルステートの保存してます。
    }

参考サイト

このスクラップは2022/04/17にクローズされました