1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Nextjs, Fauna, GraphQLでソート

Last updated at Posted at 2022-01-09

#目的
こちらのサイトを参考に認証機能を搭載したCRUDアプリを作成しました。

こちらのアプリにtimeという項目を追加し、timeでソートされた状態で出力できるように改良しようと思います。

##手順1 スキーマ
FaunaのGraphQL Playgroundからスキーマを変更しましょう。
allTodosSortedByTime: [Todo!]! @resolver(name: "sort_by_time", paginated: true)
を追加することによってsort_by_timeという新たなuse-defiend functionを作成します。

type Todo {
  task: String!
  owner: User!
  time: String 
}

type User {
  email: String! @unique
  todos: [Todo!] @relation
}

type Query {
  allTodos: [Todo!]
  allTodosSortedByTime: [Todo!]! @resolver(name: "sort_by_time", paginated: true)
}

##手順2 インデックス作成
ドキュメントを並び替える用の新たなインデックスを作成します。
FaunaのShellから以下のコードを実行しましょう。

shell
CreateIndex({
  name: "all_Todos_sorted_by_time",
  source: Collection("Todo"),
  values: [
    { field: ["data", "time"] },
    { field: ["ref"] }
  ]
})

#手順3 function更新
手順1で作成したfunctionをアルファベット順に並べる関数を作成します。

shell
Update(Function("sort_by_time"), {
  body: Query(
    Lambda(
      ["size", "after", "before"],
      Let(
        {
          match: Match(Index("all_Todos_sorted_by_time")),
          page: If(
            Equals(Var("before"), null),
            If(
              Equals(Var("after"), null),
              Paginate(Var("match"), { size: Var("size") }),
              Paginate(Var("match"), { size: Var("size"), after: Var("after") })
            ),
            Paginate(Var("match"), { size: Var("size"), before: Var("before") })
          )
        },
        Map(Var("page"), Lambda("values", Get(Select(1, Var("values")))))
      )
    )
  )
})

#手順4 Functionの呼び出し
Auth UserがFunctionを呼び出せるようにします。
SecurityでFunctionのCallを許可するようにしてください。

image.png

#手順5 index.jsの更新
allTodosが呼び出されていたところをallTodosSortedByTimeに変更しましょう。

・・・
const { data, error ,mutate } = useSWR(
  gql`
    {
      allTodosSortedByTime {
        data {
          _id
          task
          completed
          time
        }
      }
    }
  `,
  fetcher
);

・・・

  {data ? (
    <div className={styles.todos}>
      {data.allTodosSortedByTime.data.map((todo) => (
        <div key={todo._id} className={styles.todo}>

・・・

##参考

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?