Gatsby
ΠΠΠ§ΠΠ«Π
Gatsby
ΠΠΠ§ΠΠ«Π
- Π Π΅Π³ΠΈΡΡΡΠ°ΡΠΈΡ
- 10 ΠΠΊΡ 2018
- Π‘ΠΎΠΎΠ±ΡΠ΅Π½ΠΈΡ
- 44,440
- ΠΠ°ΠΉΠΊΠΈ
- 204,351
ΠΠ²ΡΠΎΡ: Lectrum
ΠΠ°Π·Π²Π°Π½ΠΈΠ΅: ΠΠΈΠ΄Π΅ΠΎΠΊΡΡΡ ΠΏΠΎ GraphQL (2020)

Π ΠΊΡΡΡΠ΅
ΠΡΠΎΠ΄Π²ΠΈΠ½ΡΡΡΠΉ ΠΈ ΡΠΌΠΊΠΈΠΉ
ΠΠΎ Π²ΡΠ΅ΠΌΡ ΠΊΡΡΡΠ° Π²Ρ ΠΈΠ·ΡΡΠΈΡΠ΅ Π²ΡΠ΅ ΡΠ΅ΠΌΡ, Π½Π°ΡΠΈΠ½Π°Ρ ΠΎΡ Π³Π»ΡΠ±ΠΎΠΊΠΎΠ³ΠΎ ΡΡΠ°Π²Π½Π΅Π½ΠΈΡ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ GraphQL ΠΈ Rest, ΡΠ°Π·Π±Π΅ΡΡΡΠ΅ΡΡ Ρ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΠΎΠΌ GraphQL, ΡΠ·Π½Π°Π΅ΡΠ΅ ΠΏΠΎΡΠ΅ΠΌΡ ΡΡΠΎ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΡ Π±ΡΠ΄ΡΡΠ΅Π³ΠΎ. ΠΡ Π½Π°ΡΡΠΈΠΌ Π²Π°Ρ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ GraphQL Π²ΠΌΠ΅ΡΡΠ΅ Ρ React, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ Apollo. Π ΡΠ°ΠΊΠΆΠ΅ Π²Ρ ΡΠ·Π½Π°Π΅ΡΠ΅ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΠΈ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ GraphQL Π² Backend, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΡ Node.js Π²ΠΌΠ΅ΡΡΠ΅ Ρ Express.js ΠΈ Apollo.
Π‘ ΡΠ°ΠΌΡΡ Π°Π·ΠΎΠ²
ΠΡ ΠΏΠΎΠ΄ΡΠ°Π·ΡΠΌΠ΅Π²Π°Π΅ΠΌ, ΡΡΠΎ Π²Ρ Π½Π΅ Π·Π½Π°ΠΊΠΎΠΌΡ Ρ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠ΅ΠΉ GraphQL, Π½ΠΎ Ρ ΠΎΡΠΈΡΠ΅ ΠΎΡΠ²ΠΎΠΈΡΡ Π΅Ρ c Π½ΡΠ»Ρ. ΠΠ»Ρ ΠΊΠΎΠΌΡΠΎΡΡΠ½ΠΎΠ³ΠΎ ΠΎΠ±ΡΡΠ΅Π½ΠΈΡ Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠ²Π΅ΡΠ΅Π½Π½ΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ JavaScript, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΈΠΌΠ΅ΡΡ Π±Π°Π·ΠΎΠ²ΠΎΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΎ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΡΡ React ΠΈ Node.js.
Π‘ΡΡΡΠΊΡΡΡΠ° ΠΊΡΡΡΠ°
Π‘ΠΊΠ°ΡΠ°ΡΡ:
ΠΠ°Π·Π²Π°Π½ΠΈΠ΅: ΠΠΈΠ΄Π΅ΠΎΠΊΡΡΡ ΠΏΠΎ GraphQL (2020)

Π ΠΊΡΡΡΠ΅
ΠΡΠΎΠ΄Π²ΠΈΠ½ΡΡΡΠΉ ΠΈ ΡΠΌΠΊΠΈΠΉ
ΠΠΎ Π²ΡΠ΅ΠΌΡ ΠΊΡΡΡΠ° Π²Ρ ΠΈΠ·ΡΡΠΈΡΠ΅ Π²ΡΠ΅ ΡΠ΅ΠΌΡ, Π½Π°ΡΠΈΠ½Π°Ρ ΠΎΡ Π³Π»ΡΠ±ΠΎΠΊΠΎΠ³ΠΎ ΡΡΠ°Π²Π½Π΅Π½ΠΈΡ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ GraphQL ΠΈ Rest, ΡΠ°Π·Π±Π΅ΡΡΡΠ΅ΡΡ Ρ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΠΎΠΌ GraphQL, ΡΠ·Π½Π°Π΅ΡΠ΅ ΠΏΠΎΡΠ΅ΠΌΡ ΡΡΠΎ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΡ Π±ΡΠ΄ΡΡΠ΅Π³ΠΎ. ΠΡ Π½Π°ΡΡΠΈΠΌ Π²Π°Ρ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ GraphQL Π²ΠΌΠ΅ΡΡΠ΅ Ρ React, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ Apollo. Π ΡΠ°ΠΊΠΆΠ΅ Π²Ρ ΡΠ·Π½Π°Π΅ΡΠ΅ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΠΈ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡ GraphQL Π² Backend, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΡ Node.js Π²ΠΌΠ΅ΡΡΠ΅ Ρ Express.js ΠΈ Apollo.
Π‘ ΡΠ°ΠΌΡΡ Π°Π·ΠΎΠ²
ΠΡ ΠΏΠΎΠ΄ΡΠ°Π·ΡΠΌΠ΅Π²Π°Π΅ΠΌ, ΡΡΠΎ Π²Ρ Π½Π΅ Π·Π½Π°ΠΊΠΎΠΌΡ Ρ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠ΅ΠΉ GraphQL, Π½ΠΎ Ρ ΠΎΡΠΈΡΠ΅ ΠΎΡΠ²ΠΎΠΈΡΡ Π΅Ρ c Π½ΡΠ»Ρ. ΠΠ»Ρ ΠΊΠΎΠΌΡΠΎΡΡΠ½ΠΎΠ³ΠΎ ΠΎΠ±ΡΡΠ΅Π½ΠΈΡ Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠ²Π΅ΡΠ΅Π½Π½ΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ JavaScript, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΈΠΌΠ΅ΡΡ Π±Π°Π·ΠΎΠ²ΠΎΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΎ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΡΡ React ΠΈ Node.js.
Π‘ΡΡΡΠΊΡΡΡΠ° ΠΊΡΡΡΠ°
- + 1. GraphQL. ΠΠ²Π΅Π΄Π΅Π½ΠΈΠ΅
- ΠΠ±Π·ΠΎΡ ΠΊΡΡΡΠ°
- Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ GraphQL
- Π‘ΡΠ°Π²Π½Π΅Π½ΠΈΠ΅ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ GraphQL ΠΈ REST
- ΠΡΠ½ΠΎΠ²Π½ΡΠ΅ ΠΏΡΠΈΠ½ΡΠΈΠΏΡ GraphQL
- ΠΡΡ ΠΈΡΠ΅ΠΊΡΡΡΠ° GraphQL ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ
- ΠΠ±Π·ΠΎΡ GraphQL ΠΊΠ»ΠΈΠ΅Π½ΡΠΎΠ²
- ΠΠ±Π·ΠΎΡ GraphQL Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ Ρ Backend
- ΠΠ±Π·ΠΎΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ Ρ GraphQL
- ΠΠ΅Π·ΠΎΠΏΠ°ΡΠ½ΠΎΡΡΡ GraphQL ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ
- + 2. GraphQL. ΠΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΠΈ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΠ°
- Π’ΠΈΠΏΡ Π΄Π°Π½Π½ΡΡ Π² GraphQL
- Π Π°Π±ΠΎΡΠ° Ρ Query Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΠΌΠΈ
- ΠΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΠΈ ΠΏΡΠΈ ΡΠ°Π±ΠΎΡΠ΅ Ρ Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΠΌΠΈ ΡΡΡΡΠΊΡΡΡΠ°ΠΌΠΈ Π΄Π°Π½Π½ΡΡ
- Π Π°Π±ΠΎΡΠ° Ρ Π°ΡΠ³ΡΠΌΠ΅Π½ΡΠ°ΠΌΠΈ
- ΠΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΠΈ ΠΏΡΠΈ ΡΠ°Π±ΠΎΡΠ΅ Ρ Π°Π»ΠΈΠ°ΡΠ°ΠΌΠΈ
- Π Π°Π±ΠΎΡΠ° Ρ input Π΄Π°Π½Π½ΡΠΌΠΈ
- ΠΠΎΠΏΡΠ»ΡΡΠ½ΡΠ΅ ΠΎΡΠΈΠ±ΠΊΠΈ ΠΏΡΠΈ ΡΠ°Π±ΠΎΡΠ΅ Ρ GraphQL Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΠΌΠΈ
- + 3. GraphQL. ΠΡΠΎΠ΄Π²ΠΈΠ½ΡΡΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ
- Π Π°Π±ΠΎΡΠ° Ρ ΠΌΡΡΠ°ΡΠΈΡΠΌΠΈ Π² GraphQL
- ΠΡΡΠ΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ Π² GraphQL
- Π Π°Π±ΠΎΡΠ° Ρ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ
- Π Π°Π±ΠΎΡΠ° Ρ ΠΏΠΎΠ΄ΠΏΠΈΡΠΊΠ°ΠΌΠΈ
- + 4. GraphQL Frontend. ΠΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΡ Apollo, ΡΠ°Π±ΠΎΡΠ° Ρ Query-Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΠΌΠΈ
- ΠΠ±Π·ΠΎΡ ΡΡΠ°ΡΡΠΎΠ²ΠΎΠΉ ΡΠΎΡΠΊΠΈ
- ΠΠ±Π·ΠΎΡ Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠ΅ΠΉ ΠΏΡΠΎΠ΅ΠΊΡΠ°
- Π Π°Π·Π±ΠΎΡ ΡΡΡΡΠΊΡΡΡΡ ΠΏΡΠΎΠ΅ΠΊΡΠ°
- ΠΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π² Apollo
- ΠΠΎΡΠΈΠ³ΡΡΠ°ΡΠΈΡ Apollo ΠΊΠ»ΠΈΠ΅Π½ΡΠ°
- Π Π°Π±ΠΎΡΠ° Ρ Query Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΠΌΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Apollo
- + 5. GraphQL Frontend. Π Π°Π±ΠΎΡΠ° Ρ Apollo ΠΌΡΡΠ°ΡΠΈΡΠΌΠΈ ΠΈ ΡΠΎΡΡΠΈΠ½Π³ΠΎΠΌ
- ΠΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΠΈ ΠΏΡΠΈ ΡΠ°Π±ΠΎΡΠ΅ Ρ ΠΌΡΡΠ°ΡΠΈΡΠΌΠΈ
- Π Π°Π±ΠΎΡΠ° Ρ ΡΡΡΠ»ΠΊΠ°ΠΌΠΈ
- Π Π°Π±ΠΎΡΠ° Ρ ΡΠΎΡΡΠΈΠ½Π³ΠΎΠΌ
- + 6. GraphQL Frontend. ΠΡΡΠ΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Apollo
- ΠΡΡΠ΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Apollo
- ΠΡΠΎΠ΄Π²ΠΈΠ½ΡΡΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΠΏΠΎ ΡΠ°Π±ΠΎΡΠ΅ ΡΠΎ Store
- ΠΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΠΈ ΠΏΡΠΈ ΡΠ°Π±ΠΎΡΠ΅ ΡΠΎ ΡΠ»ΠΎΠΆΠ½ΡΠΌΠΈ ΠΌΡΡΠ°ΡΠΈΡΠΌΠΈ
- ΠΠΎΠΏΡΠ»ΡΡΠ½ΡΠ΅ ΠΎΡΠΈΠ±ΠΊΠΈ ΠΏΡΠΈ ΡΠ°Π±ΠΎΡΠ΅ Ρ Apollo
- + 7. GraphQL Frontend. Π€ΠΈΠ»ΡΡΡΠ°ΡΠΈΡ ΠΈ ΠΏΠΎΠΈΡΠΊ. Π Π°Π±ΠΎΡΠ° Ρ ΠΏΠΎΠ΄ΠΏΠΈΡΠΊΠ°ΠΌΠΈ
- Π€ΠΈΠ»ΡΡΡΠ°ΡΠΈΡ Π΄Π°Π½Π½ΡΡ
- ΠΠΎΠΈΡΠΊ
- Realtime ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΠΎΠ΄ΠΏΠΈΡΠΎΠΊ
- Π Π°Π±ΠΎΡΠ° Ρ ΠΏΠ°Π³ΠΈΠ½Π°ΡΠΈΠ΅ΠΉ
- + 8. GraphQL Backend. ΠΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΡ GraphQL ΡΠ΅ΡΠ²Π΅ΡΠ°. Π Π°Π±ΠΎΡΠ° Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΠΌΠΈ
- ΠΠ±Π·ΠΎΡ ΡΡΠ°ΡΡΠΎΠ²ΠΎΠΉ ΡΠΎΡΠΊΠΈ
- ΠΠ±Π·ΠΎΡ Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠ΅ΠΉ ΠΏΡΠΎΠ΅ΠΊΡΠ°
- Π Π°Π·Π±ΠΎΡ ΡΡΡΡΠΊΡΡΡΡ ΠΏΡΠΎΠ΅ΠΊΡΠ°
- Π Π°Π·Π±ΠΎΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ Apollo Π½Π° ΠΏΠ»Π°ΡΡΠΎΡΠΌΠ΅ Node.js
- Π Π°Π±ΠΎΡΠ° Ρ GraphQL Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΠΌΠΈ
- Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΠ΅Π·ΠΎΠ²Π»Π΅ΡΠΎΠ² ΠΏΠΎ ΡΠ°Π±ΠΎΡΠ΅ Ρ Query
- Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΠ΅Π·ΠΎΠ²Π»Π΅ΡΠΎΠ² ΠΏΠΎ ΡΠ°Π±ΠΎΡΠ΅ Ρ Mutation
- + 9. GraphQL Backend. Π Π°Π±ΠΎΡΠ° Ρ Π°ΡΡΠ΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡΠΌΠΈ
- ΠΡΡΠ΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ
- Π Π°Π±ΠΎΡΠ° ΡΠΎ ΡΠ»ΠΎΠΆΠ½ΡΠΌΠΈ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΠΌΠΈ
- ΠΠΎΠΏΡΠ»ΡΡΠ½ΡΠ΅ ΠΎΡΠΈΠ±ΠΊΠΈ ΠΏΡΠΈ ΡΠ°Π±ΠΎΡΠ΅ Ρ GraphQL ΡΠ΅ΡΠ²Π΅ΡΠΎΠΌ
- + 10. GraphQL Backend. ΠΡΠΎΠ΄Π²ΠΈΠ½ΡΡΡΠ΅ ΡΠ΅Ρ
Π½ΠΈΠΊΠΈ. Π Π°Π±ΠΎΡΠ° Ρ ΠΏΠΎΠ΄ΠΏΠΈΡΠΊΠ°ΠΌΠΈ
- ΠΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΡ GraphQL ΡΠ΅ΡΠ²Π΅ΡΠ° Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ Ρ ΠΏΠΎΠ΄ΠΏΠΈΡΠΊΠ°ΠΌΠΈ
- Π€ΠΈΠ»ΡΡΡΠ°ΡΠΈΡ Π΄Π°Π½Π½ΡΡ
- ΠΠΎΠ»Π΅Π·Π½ΡΠ΅ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ ΠΏΡΠΈ ΡΠ°Π±ΠΎΡΠ΅ Ρ GraphQL ΡΠ΅ΡΠ²Π΅ΡΠΎΠΌ
Π‘ΠΊΡΡΡΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π΄ΠΎΡΡΡΠΏΠ½ΠΎ Π΄Π»Ρ Π·Π°ΡΠ΅Π³ΠΈΡΡΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ
ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ!
Π‘ΠΊΠ°ΡΠ°ΡΡ:
ΠΠ»Ρ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° ΡΠΊΡΡΡΠΎΠ³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ Π²ΠΎΠΉΡΠΈ ΠΈΠ»ΠΈ Π·Π°ΡΠ΅Π³ΠΈΡΡΡΠΈΡΠΎΠ²Π°ΡΡΡΡ.