| title | GraphQL λͺ¨λ² μ¬λ‘ |
|---|---|
| sidebarTitle | μκ° |
| layout | ../_core/DocsLayout |
| category | λͺ¨λ² μ¬λ‘ |
| permalink | /learn/best-practices/ |
| next | /learn/thinking-in-graphs/ |
GraphQL λͺ μΈλ λ€νΈμν¬, μΈμ¦, νμ΄μ§λ€μ΄μ μ²λ¦¬μ κ°μ APIκ° μ§λ©΄νλ λͺ κ°μ§ μ€μν λ¬Έμ μ λν΄ μλμ μΌλ‘ λ€λ£¨μ§ μμ΅λλ€. GraphQLμ μ¬μ©ν λ μ΄λ¬ν λ¬Έμ μ λν ν΄κ²°μ± μ΄ μλ€λ κ²μ μλλλ€. λ¨μ§ μ΄ λ¬Έμ λ€μ GraphQL μ΄ λ¬΄μ μΈμ§μ λν κ²κ³Ό μ§μ μ μΈ κ΄λ ¨μ΄ μμΌλ©° μ΄κ²μ μΌλ°μ μ΄κΈ° λλ¬Έμ λλ€.
μ΄ μΉμ μ κΈμ μ μ μΌλ‘ λ°μ λ€μ¬μλ μλλ©°, νΉμ ν κ²½μ°μλ μ΄ μ κ·Όλ°©λ²μ΄ μ¬λ°λ₯΄μ§ μμ μλ μμ΅λλ€. μ΄ λ¬Έμμμλ GraphQL μλΉμ€μ μ€κ³ λ° λ°°ν¬μ κ΄λ ¨λ Facebookμμ κ°λ°λ μ² νμ μκ°νκ³ , HTTPλ₯Ό ν΅ν μλΉ λ° μΈμ¦κ³Ό κ°μ μΌλ°μ μΈ λ¬Έμ λ₯Ό ν΄κ²°νκΈ° μν λ°©λ²μ μ μν©λλ€.
λ€μμμλ GraphQL μλΉμ€μ κ°μ₯ μΌλ°μ μΈ λͺ¨λ² μ¬λ‘μ μ’μ λ°©λ²μ λν΄ κ°λ΅ν μ€λͺ ν©λλ€. κ·Έλ¦¬κ³ , μ΄ μΉμ μ κ° λ¬Έμμμλ μ΄ μ£Όμ λ€μ λν΄ λ μμΈν μ€λͺ ν©λλ€.
GraphQLμ μΌλ°μ μΌλ‘ μλΉμ€μ λͺ¨λ κΈ°λ₯μ νλμ μλν¬μΈνΈ HTTPλ₯Ό ν΅ν΄ μ 곡λ©λλ€. μ΄λ κ°κ° νλμ 리μμ€λ₯Ό μ¬λ¬ URLλ‘ λ ΈμΆνλ REST APIμλ λμ‘°μ μ λλ€. GraphQLμ μ΄ λ¦¬μμ€ URLλ€κ³Ό ν¨κ» μ¬μ©ν μλ μμ§λ§, GraphiQLκ³Ό κ°μ λꡬλ₯Ό μ¬μ©νκΈ°κ° μ΄λ €μΈ μ μμ΅λλ€.
Serving over HTTPμμ λ μμΈν μμ보μΈμ.
GraphQL μλΉμ€λ μΌλ°μ μΌλ‘ JSONμΌλ‘ μλ΅νμ§λ§ GraphQL λͺ μΈμμλ νμλ μλλλ€. JSONμ λ μ’μ λ€νΈμν¬ μ±λ₯μ 보μ₯νλ API λ μ΄μ΄λ₯Ό μν΄μλ μ΄μν μ νμ²λΌ λ³΄μΌ μ μμ§λ§ λλΆλΆ ν μ€νΈμ΄κΈ° λλ¬Έμ GZIPμΌλ‘ λ§€μ° μ μμΆλ©λλ€.
λͺ¨λ νλ‘λμ GraphQL μλΉμ€λ GZIPμ νμ±ννκ³ ν΄λΌμ΄μΈνΈκ° λ€μ ν€λλ₯Ό 보λ΄λκ²μ κΆμ₯ν©λλ€.
Accept-Encoding: gzip
JSONμ ν΄λΌμ΄μΈνΈ λ° API κ°λ°μλ€μκ²λ μΉμνλ©°, μ½κ³ λλ²κΉ νκΈ° μ½μ΅λλ€. μ€μ λ‘ GraphQL λ¬Έλ²μ JSON λ¬Έλ²μ λΆλΆμ μΌλ‘ μν₯μ λ°μμ΅λλ€.
GraphQL μλΉμ€κ° λ€λ₯Έ REST APIμ λ§μ°¬κ°μ§λ‘ λ²μ μ΄ λ³κ²½λλ κ²μ λ§μ μλ μμ§λ§, GraphQL μ€ν€λ§μ μ§μμ μΈ μ λ°μ΄νΈλ₯Ό μν λꡬλ₯Ό μ 곡νμ¬ λ²μ κ΄λ¦¬λ₯Ό νΌνλ κ²μ λν΄μ κ°ν μ견μ κ°μ§κ³ μμ΅λλ€.
μ λλΆλΆμ APIλ λ²μ κ΄λ¦¬λ₯Ό ν΄μΌν κΉμ? API μλν¬μΈνΈμμ 리ν΄λ λ°μ΄ν°μ λν λ³κ²½μ΄ μμ λ λͺ¨λ λ³κ²½μ ν° λ³νλ₯Ό μΌμΌν¬ μ μμΌλ©°, ν° λ³κ²½μ¬νμλ μ λ²μ μ΄ νμν©λλ€. APIμ μλ‘μ΄ κΈ°λ₯μ μΆκ°νλλ° μλ‘μ΄ λ²μ μ΄ νμν κ²½μ° APIλ₯Ό μ΄ν΄νκΈ° μ½κ³ μ μ§ λ³΄μν μ μλ λ²μ μ μμ£Ό μΆμνκ³ μ λ°μ΄νΈλ λ²μ μ μ¬μ©νλ κ²μ΄ μ’μ΅λλ€.
λ°λλ‘ GraphQLμ λͺ μμ μΌλ‘ μμ²λ λ°μ΄ν°λ§ λ°ννλ―λ‘ μλ‘μ΄ νμ κ³Ό νλλ₯Ό ν΅ν΄ μλ‘μ΄ κΈ°λ₯μ μΆκ°ν μ μμ΅λλ€. μ΄λ νμ λ³κ²½μ¬νμ νΌνκ³ λ²μ μλ APIλ₯Ό μ 곡νλ λ°©λ²μΌλ‘ μ΄μ΄μ§λλ€.
null μ νλ¨νλ λλΆλΆμ νμ
μμ€ν
μ, μΌλ° νμ
κ³Ό ν΄λΉ νμ
μ nullable λ²μ μ μ 곡νλ©°, λͺ
μμ μΌλ‘ μ μΈνμ§ μλν, κΈ°λ³Έ νμ
μ nullμ ν¬ν¨νμ§ μμ΅λλ€. νμ§λ§ GraphQL νμ
μμ€ν
μμλ λͺ¨λ νλκ° κΈ°λ³Έμ μΌλ‘ nullable μ
λλ€. μ΄λ λ°μ΄ν°λ² μ΄μ€ λ° κΈ°ν λ°±μλμ λ€νΈμν¬ μλΉμ€μμ λ§μ μΌμ΄ λ°μν μ μκΈ° λλ¬Έμ
λλ€. λ°μ΄ν°λ² μ΄μ€κ° λ€μ΄λκ±°λ λΉλκΈ° μμ
μ΄ μ€ν¨ν μ μμΌλ©°, μμΈκ° λ°μν μλ μμ΅λλ€. λ¨μν μμ€ν
μ€ν¨ μ΄μΈμλ μμ² λ΄μ κ° νλκ° μλ‘ λ€λ₯Έ μΈμ¦ κ·μΉμ κ°μ Έμ, κΆνμ΄ μΈλΆνλ μ μμ΅λλ€.
μ΄λ¬ν μ΄μ λ‘ μΈν΄ κΈ°λ³Έμ μΌλ‘ λͺ¨λ νλλ₯Ό nullable λ‘ μ€μ νλ©΄ μμ²μ΄ μμ ν μ€ν¨νμ§ μκ³ ν΄λΉ νλκ° null λ‘ λ°νλ μ μμ΅λλ€. λμ , GraphQLμ non-null νμ
μ μ 곡νμ¬, μμ²μ νλκ° μ λ null μ λ°ννμ§ μλλ‘ λ³΄μ₯ν μ μμ΅λλ€. λμ μ, λ§μ½ μ€λ₯κ° λ°μνλ©΄, μ΄μ μμ νλκ° λμ null μ΄ λ©λλ€.
GraphQL μ€ν€λ§λ₯Ό μ€κ³ν λ, μλͺ»λ μ μλ λͺ¨λ λ¬Έμ μ μ€ν¨ν νλμ λν΄ null μ΄ μ μ ν κ°μμ λͺ
μ¬νλ κ²μ΄ μ€μν©λλ€. μΌλ°μ μΌλ‘ κ·Έλ μ§λ§ λλ‘λ κ·Έλ μ§ μλ κ²½μ°λ μμ΅λλ€. μ΄λ¬ν κ²½μ°, null μ΄ μλμ 보μ₯νλ non-null νμ
μ μ¬μ©νμμμ€.
GraphQL νμ μμ€ν μ μΌλΆ νλκ° κ°μ 리μ€νΈλ₯Ό λ°ννμ§λ§ API μ€κ³μλ κΈ΄ 리μ€νΈμ λν νμ΄μ§λ€μ΄μ μ μ 곡ν μ μμ΅λλ€. νμ΄μ§λ€μ΄μ μ μν λ€μν API λμμΈμ΄ μμΌλ©°, κ°κ° μ₯λ¨μ μ΄ μμ΅λλ€.
μΌλ°μ μΌλ‘ κΈ΄ 리μ€νΈμ λ°νν μ μλ νλλ firstλ after μΈμλ₯Ό μ¬μ©νμ¬, λͺ©λ‘μ νΉμ ꡬκ°μ μ§μ ν μ μμ΅λλ€. μ¬κΈ°μ after λ 리μ€νΈμ κ° κ°μ λν κ³ μ μλ³μ(unique identifier)μ
λλ€.
κΈ°λ₯μ΄ λ€μν νμ΄μ§λ€μ΄μ
μ μ¬μ©νμ¬ κΆκ·Ήμ μΌλ‘ APIλ₯Ό λμμΈνλ©΄ Connections λΌλ λͺ¨λ² μ¬λ‘ ν¨ν΄μ΄ μκΉλλ€. Relayμ κ°μ GraphQLμ λͺλͺ ν΄λΌμ΄μΈνΈ λꡬλ Connections ν¨ν΄μ ꡬννλ©°, GraphQL APIκ° μ΄ ν¨ν΄μ μ¬μ©ν λ ν΄λΌμ΄μΈνΈ μΈ‘ νμ΄μ§λ€μ΄μ
μ μλμΌλ‘ μ§μν©λλ€.
νμ΄μ§λ€μ΄μ λ¬Έμμμ μμΈν μ½μ΄λ³΄μΈμ.
GraphQLμ μλ²μ κΉλν μ½λλ₯Ό μμ±ν μ μλ λ°©μμΌλ‘ μ€κ³λμμ΅λλ€. λͺ¨λ νμ μ κ° νλμλ ν΄λΉ κ°μ νμΈνλλ° μ΄μ μ λ§μΆ λ¨μΌλͺ©μ (single-purpose) ν¨μκ° μμ΅λλ€. νμ§λ§ μ΄λ¬ν μΆκ°μ μΈ κ³ λ €μμ΄, κ°λ¨ν GraphQL μλΉμ€λ λ§€μ° λ°λ³΅μ μΌλ‘ λ°μ΄ν°λ₯Ό λ°μ΄ν°λ² μ΄μ€μμ λ‘λν μλ μμ΅λλ€.
μ΄λ μΌλ°μ μΌλ‘ λ°±μλμ λ°μ΄ν°μ λν λ€μ€ μμ²μ΄ λ¨κΈ°κ°μ λ°μν λ, λ¨μΌ μμ²μμ λ°μ΄ν°λ² μ΄μ€λ λ§μ΄ν¬λ‘μλΉμ€λ‘ μ μ‘λλ μΌκ΄ μ²λ¦¬ κΈ°λ²μΈ Facebookμ DataLoaderμ κ°μ λꡬλ₯Ό μ¬μ©νμ¬ ν΄κ²°ν μ μμ΅λλ€.