web-dev-qa-db-ja.com

GraphQLのビューアーフィールドの意味は何ですか？

GraphQLのルートクエリフィールドviewerの目的は何ですか？

この記事 に基づいて、viewerを使用してトークンパラメータを受け入れることができるため、現在ログインしているユーザーを確認できます。

どのように実装すればよいですか？

graphqlrelayjs
26
Sibelius Seraphini

viewerルートクエリフィールドの目的

viewerは、GraphQLやリレー固有のものではありません。ほとんどのWebアプリケーションは、ユーザーまたはビューアのいくつかの目的を果たします。ユーザーに提供されるさまざまなデータをモデル化する最上位エンティティは、viewerと名付けることができます。 userという名前を付けることもできます。たとえば、 Relay todo example にはviewerルートクエリフィールドがあります。

viewer: {
  type: GraphQLUser,
  resolve: () => getViewer(),
},

viewerがなくてもかまいません。たとえば、 Relay starwars example にはviewerルートクエリフィールドがありません。

つまり、このviewerをGraphQLスキーマのルートクエリフィールドとして持つことで、現在のユーザーに基づいてデータを提供できます。

実装：ビューアーと一緒に認証トークンを使用する方法

私の答えは、あなたの言及された記事ですでに説明されていることに従います。手順は次のとおりです。

  1. サーバー側で、ミューテーションを作成して認証トークンを取得します。 LoginMutationという名前を付けましょう。この変更への入力はユーザー資格情報であり、出力は認証トークンです。

  2. クライアント側で relay framework を使用する場合は、クライアント側の変更を実装します。変更が成功したら、認証トークンを保存します。

  3. クライアント側のリレーコードで、authTokenクエリのviewerパラメータを追加します。 authTokenの値は、ログイン変更が成功した後に受信した認証トークンです。

代替

記事ですでに述べたように、ユーザーを認証する別の方法は、GraphQLの外部で行うことです。詳細については、2つの優れた回答 this と this を参照してください。

Jonas Helferがこれについて2部構成の記事を書いています。これは非常に便利です。 Part 1 、 Part 2

34
Ahmad Ferdous

viewerフィールド（設計パターン）の背後にあるアイデアは、現在ログインしているユーザーにのみ関連するトップレベルのクエリフィールドをグループ化することでした。例えば：

# EXAMPLE 1

quer {
  viewer {
    stories { ... } # the list of published stores as well as drafts (current user)
  }

  stories { ... }   # the list of published stories (all users)
}

現在ログに記録されているこのユーザーデータは、viewerフィールド自体にマージされたか、その下にネストされていました：

# EXAMPLE 2

query {
  viewer {
    id
    email
    displayName
    stories { ... }
  }
}

# EXAMPLE 3

query {
  viewer {
    me { id email displayName }
    stories { ... }
  }
}

上記の3つの例はすべて、viewerフィールドを完全に削除することで簡略化できますが、まったく同じ機能を備えています（推奨）。

query {
  # The currently logged in user or NULL if not logged in
  me {
    id
    email
    displayName
  }

  # Published stories only (all users)
  stories {
    ...
  }

  # Published stories as well as drafts (the current user)
  stories(drafts: true) {
    ...
  }
}

完全な例は React Starter Kit にあります。これは、参照プロジェクトとして、または新しい開発のシード/テンプレートとして使用できます。見る - src/server/schema.js 。

1
Konstantin Tarkus