Relayにおけるクエリの命名規則
relay-compilerに強制される (従っていないとエラーになる) 規則と、Relayのドキュメントやサンプルコードで示されている (Facebookの人たちがこうしているであろうと推測される) 規則に分かれている。 ここでは前者を強い規則、後者を緩い規則とそれぞれ呼んで区別することにする。個人的に使っている規則もあるので参考までに紹介する。
強い規則
クエリ・フラグメント名はモジュール名で始める
code:Home.tsx
// OK
const data = useLazyLoadQuery(graphql`
query HomeQuery {
homeTimeline {
...
}
}
`, ...)
// NG: コンポーネント名はHomeだがクエリ名はRootQueryとなっている
const data = useLazyLoadQuery(graphql`
query RootQuery {
homeTimeline {
...
}
}
`, ...)
// NG: コンポーネント名はHomeだがクエリ名が小文字始まりになっている
const data = useLazyLoadQuery(graphql`
query homeQuery {
homeTimeline {
...
}
}
`, ...)
クエリ名は操作の種別 (Query, Mutation, Subscription) で終わる
code:Home.tsx
// OK
const data = useLazyLoadQuery(graphql`
query HomeQuery {
homeTimeline {
...
}
}
`, ...)
// NG: クエリ名がQueryで終わっていない
const data = useLazyLoadQuery(graphql`
query HomeData {
homeTimeline {
...
}
}
`, ...)
弱い規則
フラグメント名は _(取得するデータ型またはクエリ名の小文字始まり) で終わる
code:UserComponent.jsx
function UserComponent(props: Props) {
const data = useFragment(
graphql`
fragment UserComponent_user on User {
name
profile_picture(scale: 2) {
uri
}
}
`,
props.user,
);
...
}
フラグメントのデータを再取得するクエリ名は ...RefetchQuery にする
code:CommentBody.jsx
function CommentBody(props: Props) {
const data, refetch = useRefetchableFragment<CommentBodyRefetchQuery, _>( graphql`
fragment CommentBody_comment on Comment
@refetchable(queryName: "CommentBodyRefetchQuery") {
body(lang: $lang) {
text
}
}
`,
props.comment,
);
...
}
クエリ名の CommentBody がコンポーネント名を表すのか、取得対象のデータ名 (Comment 型の body フィールド) を表すのかは解釈の余地がありそう。
個人的な規則
モジュール内でのみ使っている (exportしない) コンポーネントで使うフラグメント名は (モジュール名)_(コンポーネント名)_(取得するデータ型の小文字始まり) にする
長くなってわけが分からない気がする
TODO: コード例を用意する