メインコンテンツへスキップ
バージョン: v18.0.0

Docblock 形式

Relay リゾルバーを使用すると、クライアントサイドのデータによってバックアップされる追加の型とフィールドをGraphQLスキーマに定義できます。これを実現するために、Relayコンパイラはコード内の特別な@RelayResolver docblockを検索します。これらのdocblockは、スキーマ内の型とフィールドを定義し、それらを実装するリゾルバー関数をRelayがどこで見つけることができるかも指定します。

Relayリゾルバーの概要と使用方法については、Relayリゾルバーガイドを参照してください。このページでは、Relayコンパイラが検索するさまざまなdocblockタグとその使用方法について説明します。

Relayコンパイラは、

@RelayResolverタグを含むdocblockのみを調べます。その他のdocblockは無視されます。

@RelayResolver TypeName

@RelayResolverタグの後に単一の名称が続く場合、スキーマに新しいGraphQL型が定義されます。デフォルトでは、型名と一致する名前のエクスポートされた関数が続くことが期待されます。この関数はIDを引数として受け取り、その型のバックアップデータとなるJavaScriptモデル/オブジェクトを返す必要があります。型のバックアップデータの定義方法については、@weakを参照してください。

/**
* @RelayResolver User
*/
export function User(id): UserModel {
return UserModel.getById(id);
}

詳細については、型の定義ガイドを参照してください。

@RelayResolver TypeName.fieldName: FieldTypeName

@RelayResolverタグ内の型名にドットとフィールド定義が続く場合、その型に新しいフィールドが定義されます。.の後の部分は、GraphQLのスキーマ定義言語に従うことが期待されます。

フィールド定義の後には、フィールド名と一致する名前のエクスポートされた関数が続くことが期待されます。この関数は、型リゾルバーによって返されたモデル/オブジェクトを引数として受け取り、フィールドの値を返します。

/**
* @RelayResolver User.name: String
*/
export function name(user: UserModel): string {
return user.name;
}

詳細については、フィールドの定義ガイドを参照してください。

@rootFragment

Relayリゾルバーは、グラフ内の他のデータから派生したデータをモデル化するためにも使用できます。これらのフィールドは、依存するデータが変更されると、Relayによって自動的に再計算されます。

派生フィールドを定義するには、既存のフィールド定義に@rootFragmentタグを使用し、その後にフィールドが依存するデータを定義するフラグメントの名前を続けます。フィールドのリゾルバー関数には、readFragment()を使用してフラグメントデータを読み取るために使用できるフラグメントキーが渡されます。

import {readFragment} from 'relay-runtime';

/**
* @RelayResolver User.fullName: String
* @rootFragment UserFullNameFragment
*/
export function fullName(key: UserFullNameFragment$key): string {
const user = readFragment(
graphql`
fragment UserFullNameFragment on User {
firstName
lastName
}
`,
key,
);
return `${user.firstName} ${user.lastName}`;
}

派生フィールドの詳細については、を参照してください。

@live

時間の経過とともに変化する可能性のあるクライアント状態をモデル化する場合、単一の値を返すリゾルバー関数は不十分です。これに対応するために、Relayリゾルバーでは、時間の経過とともに値のストリームを返すフィールドを定義できます。これは、フィールドまたは型定義@liveタグを追加することで行われます。

@liveリゾルバーは、Relayが現在の値を読み取り、変更を購読できるように、LiveStateValueの形状を持つオブジェクトを返す必要があります。

import type {LiveState} from 'relay-runtime';

/**
* @RelayResolver Query.counter: Int
* @live
*/
export function counter(): LiveState<number> {
return {
read: () => store.getState().counter,
subscribe: cb => {
return store.subscribe(cb);
},
};
}

ライブフィールドガイドで詳細をご覧ください。

@weak

デフォルトでは、Relayリゾルバーは、型のバックアップデータがリゾルバー関数によって返されることを期待しています。ただし、場合によっては、特定の型のオブジェクトに識別子が存在しない場合があります。「弱い」型を定義するには、上記で説明した@RelayResolver TypeName構文に@weakタグを続けます。

弱い型宣言の後には、型名と一致する名前のエクスポートされた型定義が続くことが期待されます。

/**
* @RelayResolver ProfilePicture
* @weak
*/
export type ProfilePicture = {
url: string;
width: number;
height: number;
};

を参照してください[弱い型](/docs/guides/relay-resolvers/defining-types/#Defining a “weak” type)ガイドでは、弱い型へのエッジの定義方法など、詳細情報が提供されています。

@deprecated

GraphQLスキーマ定義言語と同様に、Relayリゾルバーは@deprecatedタグをサポートしており、フィールドを非推奨としてマークします。このタグの後には、非推奨の理由として使用される文字列を続けることができます。 Relay VSCode拡張機能を使用している場合、非推奨のフィールドはエディターで特別な処理を受けます。

/**
* @RelayResolver User.name: String
* @deprecated Use `fullName` instead.
*/
export function name(user: UserModel): string {
return user.name;
}

非推奨ガイドで詳細をご覧ください。

説明

docblock内のフリーテキスト(タグに続かないテキスト)は、型またはフィールドの説明として使用されます。 Relay VSCode拡張機能を使用している場合、この説明はエディターに表示されます。

/**
* @RelayResolver User.name: String
*
* What's in a name? That which we call a rose by any other name would smell
* just as sweet.
*/
export function name(user: UserModel): string {
return user.name;
}

説明ガイドで詳細をご覧ください。