【GraphQL x TypeScript】初心者向けFragmentの使い方。考え方

gistfile1.md

【GraphQL x TypeScript】初心者向けFragmentの使い方。考え方

Fragmentの使い方についてあまり記事がなかったので書きました。

どこかどういう役割で記述されているかを理解することだなと思いました。

(onって何？？？とかで調べてもないので)

今回はわかりやすく伝えようと思います。

「... on (スキーマType)」は TypeScriptでいうところの

type Person = { age:  number, name: string }

Personの部分で

fragment (任意の名前。今回はPersonPerson) on Person {
 name
　age
}

なので

fragment PersonPerson on Person {
 name
　age
}

とします

hoges(offset: $offset, limit: $limit) {
        hoges {
            fixedType
            ...PersonPerson // here!!
        }
    }

こういうqueryがあったとしてつかう。

hogesフィールドはPersonを持っている必要があります つまり、

TypeScriptでいうと

type hoges = {
 Person : {}
}

というスキーマになる

そういうことが上では指定しているという意味。

ではそれを踏まえて、

query Hoge($offset: Int, $limit: Int!) {
    hoges(offset: $offset, limit: $limit) {
        hoges {
            fixedType
            ...HogeChunk //　ここで下のfragment HogeChunkを使っている
        }
    }
}


fragment HogeChunk on Hoge { // HogeというType上にあるフィールドを指定する　[schema 1]を参照。chunkを持っているので、chunk。
    chunk {
        ... on HogeValueChunk { // さらに HogeValueChunkはというと [schema 2]
            ...TreeHogeValues // HogeValueChunkというType上にあるフィールドを指定する
        }
        ... on HogeValueChunk {
            ...ListHogeValue // ListHogeValueというType上にあるフィールドを指定する
        }
    }
}

fragment TreeHogeValues on TreeHogeValueChunk { // Union TreeHogeValueChunkにあるフィールドを要求
    values {
        id
        value
        ...SubValuesTreeHogeValues
    }
}

fragment ListHogeValue on ListHogeValueChunk { // Union ListHogeValueChunkにあるフィールドを要求
    values {
        id
        value
    }
}

fragment SubValuesTreeHogeValues on TreeHogeValue {
    subValues {
        value
    }
}


// schema

type HogeChunk {
  hoges: [Hoge!]!
  totalCount: Int!
}

// [schema 1] Hogeはchunkをもっている
type Hoge { 
  id: ID!
  fixedType: FixedHogeType
  chunk: HogeValueChunk! 
}

//[schema 2] HogeValueChunkはTreeHogeValueChunkかListHogeValueChunkをついる。Union。

type HogeValueChunk = TreeHogeValueChunk | ListHogeValueChunk

なぜこんなにFragmentを分けているかというと 【GraphQL x TypeScript】Fragmentで返すデータ型をちゃんと絞り込まないとUnion型をoperation時に大変になります です。

ではまたー

私のこと