Menggunakan Taman Permainan Graphql dengan Gatsby

Gatsby, penjana tapak statik React yang popular, memudahkan penciptaan laman web dengan menyelaraskan sumber, bangunan, dan penempatan data. Proses biasanya melibatkan:

1. Pengambilalihan data: Mengumpulkan data dari pelbagai sumber (CMS, markdown, pangkalan data, dll.).
2. Membina Proses (GraphQL berkuasa): Menggunakan GraphQL untuk mengurus dan memproses data untuk penjanaan laman web.
3. Penyebaran: Menerbitkan tapak statik ke platform hosting (Netlify, Vercel, dll.).

Artikel ini memberi tumpuan kepada meningkatkan proses membina, khususnya dengan menggantikan IDE GraphQL GraphIQL lalai Gatsby dengan taman permainan GraphQL yang lebih kaya dengan ciri.

Graphiql vs Graphql Playground

Walaupun GraphIQL berfungsi sebagai IDE lalai Gatsby, Graphql Playground menawarkan beberapa kelebihan:

• Dokumentasi skema yang dipertingkatkan: Menyediakan dokumentasi skema interaktif, pelbagai lajur.
• Kemas kini automatik: Muat semula skema secara automatik.
• Sokongan langganan: Menyokong langganan GraphQL.
• Pengalaman pengguna yang lebih baik: Termasuk ciri -ciri seperti sejarah pertanyaan, konfigurasi header HTTP, tab, dan kelanjutan tema.

Pilihan di antara mereka bergantung pada keperluan projek anda. Tutorial ini menunjukkan menggunakan GraphQL Playground kerana keupayaan lanjutannya.

Menyediakan Taman Permainan Graphql dengan Gatsby

Panduan ini membimbing anda melalui menubuhkan projek Gatsby baru dan mengintegrasikan GraphQL Playground.

1. Pasang Gatsby CLI:

 NPM Install -g Gatsby -cli

2. Buat projek Gatsby baru:

 Gatsby New Gatsby-Playground
CD Gatsby-Playground

3. Mulakan pelayan pembangunan:

 Gatsby berkembang

Akses IDE Graphiql lalai di http://localhost:8000/__graphql . Walaupun aplikasi desktop GraphQL Playground wujud, tutorial ini menunjukkan pendekatan tangan untuk mengintegrasikannya secara langsung.

4. Konfigurasikan pembolehubah persekitaran:

Pembolehubah persekitaran membolehkan penyesuaian di seluruh persekitaran yang berbeza (pembangunan, pengeluaran). Buat fail .env.development di Root Projek:

 <code>GATSBY_GRAPHQL_IDE=playground</code>

5. Menguruskan Pembolehubah Alam Sekitar dalam JavaScript:

Pembolehubah persekitaran Gatsby boleh diakses semasa binaan masa dan node.js runtime. Untuk menggunakannya secara dinamik semasa runtime, pasang env-cmd :

 benang tambah env-cmd--dev // atau npm install--save-dev env-cmd

Ubah suai skrip "develop" dalam package.json :

 "Membangunkan": "env-cmd--file .env.development--fallback Gatsby Develop"

Ini mengarahkan env-cmd untuk memuatkan pembolehubah dari .env.development atau sandaran ke .env jika ada.

6. Mulakan semula pelayan:

Mulakan semula pelayan pembangunan:

 Benang Mula // atau NPM Run berkembang

Refresh http://localhost:8000/__graphql dalam penyemak imbas anda. Anda kini harus melihat Graphql Playground!

Kesimpulan

Tutorial ini menunjukkan cara beralih dari GraphIQL ke GraphQL Playground dalam projek Gatsby, memanfaatkan ciri -ciri taman permainan yang dipertingkatkan untuk aliran kerja pembangunan yang lebih baik. Keputusan untuk beralih bergantung pada keperluan khusus anda.

Sumber lanjut:

• Dokumentasi Gatsby JS
• Dokumentasi Taman Permainan GraphQL
• Dokumentasi ENV-CMD

Atas ialah kandungan terperinci Menggunakan Taman Permainan Graphql dengan Gatsby. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!