Terokai Graphql dengan Apollo & React: Membina Pangkalan Data Superhero

menyelam ke dunia GraphQL dan temukan mengapa ia menghasilkan keseronokan yang begitu banyak! Tutorial ini memberikan penjelasan yang jelas tentang GraphQL dan menawarkan pengalaman tangan.

Pertama, mari kita jelaskan soalan teras: Apa

graphql? Ia bukan fungsi kalkulator yang tidak jelas; Sebaliknya, ia adalah bahasa pertanyaan yang kuat (atau lebih tepatnya, spesifikasi pertanyaan) untuk mengambil data dari pelbagai sumber. Kelebihan utama? Ia mengambil hanya data yang diperlukan dalam permintaan rangkaian tunggal, menghapuskan ketidakcekapan API REST tradisional.

Tutorial ini menggunakan pelayan Apollo sebagai titik akhir dan aplikasi React dengan klien Apollo untuk mengakses data. Kami akan bermula dengan pelayan.

Konsep Utama:

GraphQL adalah bahasa pertanyaan yang menawarkan pengambilan data yang tepat dalam satu permintaan dari mana -mana sumber data, melampaui API REST dalam kecekapan dan fleksibiliti.
pelayan Apollo (endpoint) dan aplikasi React menggunakan klien Apollo adalah penting untuk penggunaan data GraphQL.
Tutorial menggambarkan penciptaan skema, penambahan data, definisi resolver, dan integrasi, menggunakan contoh pangkalan data superhero.
Ia mempamerkan bagaimana pembangunan depan dan belakang boleh diteruskan secara sebahagian besar secara bebas, dengan skema bertindak sebagai antara muka.

Menyediakan pelayan Apollo:

Buat direktori
1. . apollo-server
Navigasi ke sana dan pasang pakej yang diperlukan:

npm install apollo-server apollo-server-express graphql

create
3. dan tambah: index.js

const { ApolloServer, gql } = require('apollo-server');

ini mengimport komponen penting untuk pelayan Apollo Server dan Graphql Query Parsing.

Mewujudkan skema GraphQL:

Seterusnya, tentukan skema dalam

: index.js

const typeDefs = gql`
  type User {
    id: ID!
    name: String
    superpowers: [Superpower]!
  }

  type Superpower {
    id: ID!
    text: String
  }

  type Query {
    users: [User]
    user(id: ID!): User
  }
`;

Ini mentakrifkan

dan User jenis dan dua pertanyaan: Superpower (mengembalikan semua pengguna) dan users (mengembalikan pengguna dengan id). user

Menambah data sampel:

tambah data mock ke

: index.js

const users = [
  { id: '1', name: 'Peter Parker', superpowers: [{ id: '1', text: 'Web slinging' }, { id: '2', text: 'Spidey sense' }] },
  { id: '2', name: 'Tony Stark', superpowers: [{ id: '3', text: 'Industrial design' }, { id: '4', text: 'Robotic fashion' }] }
];

Ini menyediakan data sampel untuk pertanyaan. Ingat, GraphQL tidak terhad kepada tatasusunan JavaScript; ia boleh menyambung ke mana -mana sumber data.

Menentukan resolvers:

Resolvers mentafsirkan pertanyaan. Tambahkan ini ke

: index.js

const resolvers = {
  Query: {
    users: () => users,
    user: (root, { id }) => users.find(user => user.id === id),
  },
};

resolver mengembalikan semua pengguna, sementara users mencari pengguna dengan id. user

Memulakan pelayan:

Lengkap

dengan memberi instantiating dan memulakan pelayan: index.js

const server = new ApolloServer({ typeDefs, resolvers });
server.listen().then(({ url }) => console.log(`Apollo server started at ${url}`));

run

dan akses taman permainan GraphQL di node index.js. http://localhost:4000/

Pertanyaan interaktif:

Cuba pertanyaan ini di taman permainan:

• Ambil Nama Peter Parker:

npm install apollo-server apollo-server-express graphql

• Ambil nama dan kuasa besar Peter Parker:

const { ApolloServer, gql } = require('apollo-server');

• Ambil semua pengguna dan kuasa besar mereka:

const typeDefs = gql`
  type User {
    id: ID!
    name: String
    superpowers: [Superpower]!
  }

  type Superpower {
    id: ID!
    text: String
  }

  type Query {
    users: [User]
    user(id: ID!): User
  }
`;

Mengintegrasikan dengan React:

1. Buat aplikasi React:

const users = [
  { id: '1', name: 'Peter Parker', superpowers: [{ id: '1', text: 'Web slinging' }, { id: '2', text: 'Spidey sense' }] },
  { id: '2', name: 'Tony Stark', superpowers: [{ id: '3', text: 'Industrial design' }, { id: '4', text: 'Robotic fashion' }] }
];

2. Ubah suai src/index.js:

const resolvers = {
  Query: {
    users: () => users,
    user: (root, { id }) => users.find(user => user.id === id),
  },
};

3. Ganti src/App.js:

const server = new ApolloServer({ typeDefs, resolvers });
server.listen().then(({ url }) => console.log(`Apollo server started at ${url}`));

run npm start dalam direktori my-graphql untuk melihat hasilnya di http://localhost:3000/.

Tutorial ini menyediakan asas untuk menggunakan GraphQL. Terokai mutasi (untuk pengubahsuaian data) dan ciri -ciri canggih lain untuk meningkatkan lagi kemahiran anda. Happy Coding!

grafql faqs:

• Apa itu Graphql? Bahasa pertanyaan untuk API dan runtime untuk melaksanakan pertanyaan tersebut terhadap data anda. Ia adalah alternatif yang lebih cekap dan fleksibel untuk berehat.

• Graphql vs. Rest: REST menggunakan pelbagai titik akhir, sementara GraphQL membolehkan pelanggan hanya meminta data yang diperlukan dalam satu pertanyaan, mencegah lebihan dan kurang mendapat.

• Ciri-ciri utama GraphQL:

  Struktur pertanyaan hierarki, menaip kuat, data masa nyata dengan langganan, dan introspeksi (menanyakan skema itu sendiri).

• Skema GraphQL:

  mentakrifkan jenis data dan hubungan, bertindak sebagai kontrak antara klien dan pelayan.

• Struktur pertanyaan:

  hierarki, mencerminkan struktur data tindak balas. Pelanggan meminta medan tertentu dan bersarang untuk pengambilan data yang kompleks.

• resolvers:

  Fungsi yang menentukan cara mengambil atau bermutasi data untuk medan skema tertentu. Mereka menyambungkan pertanyaan ke sumber data.

Atas ialah kandungan terperinci Terokai Graphql dengan Apollo & React: Membina Pangkalan Data Superhero. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!