Cara membina antara muka API berskala dengan React dan GraphQL

Cara membina antara muka API boleh skala dengan React dan GraphQL

Memandangkan kerumitan aplikasi web terus meningkat, membina antara muka API boleh skala menjadi semakin penting. React dan GraphQL ialah dua teknologi popular yang membantu kami membina API yang cekap, fleksibel dan berskala. Dalam artikel ini, kami akan meneroka cara menggunakan React dan GraphQL untuk membina antara muka API boleh skala dan memberikan contoh kod khusus.

React ialah perpustakaan JavaScript untuk membina antara muka pengguna. Ia menyediakan cara untuk memecahkan antara muka kepada komponen boleh guna semula, membolehkan pembangun membina antara muka pengguna yang kompleks dengan mudah. GraphQL ialah bahasa pertanyaan dan persekitaran masa jalan yang direka untuk membolehkan pelanggan mendapatkan data yang diperlukan dengan tepat. Ia menyediakan fleksibiliti dan kecekapan untuk pertukaran data antara pelanggan dan pelayan melalui sistem jenis yang berkuasa dan bahasa pertanyaan.

Di bawah, kami akan memperkenalkan langkah demi langkah cara menggunakan React dan GraphQL untuk membina antara muka API berskala. Kami akan menggunakan Node.js sebagai pelayan bahagian belakang dan Express.js sebagai rangka kerja pelayan.

Langkah 1: Pasang kebergantungan yang diperlukan
Pertama, kita perlu memasang kebergantungan yang berkaitan untuk React dan GraphQL. Daripada baris arahan, gunakan npm atau yarn untuk memasang dependensi berikut:

npm install react react-dom graphql express express-graphql

Langkah 2: Sediakan pelayan Express
Seterusnya, kami akan menyediakan pelayan Express dan mencipta titik akhir GraphQL. Dalam direktori akar projek, buat fail bernama server.js dan tambah kod berikut:

const express = require('express');
const { graphqlHTTP } = require('express-graphql');
const { buildSchema } = require('graphql');

// 创建GraphQL schema
const schema = buildSchema(`
  type Query {
    hello: String
  }
`);

// 定义GraphQL resolver
const root = {
  hello: () => 'Hello, World!'
};

// 创建Express app
const app = express();

// 设置GraphQL端点
app.use('/graphql', graphqlHTTP({
  schema: schema,
  rootValue: root,
  graphiql: true
}));

// 启动服务器
app.listen(4000, () => {
  console.log('GraphQL server is running at http://localhost:4000/graphql');
});

Dalam kod di atas, kami mula-mula mencipta skema GraphQL yang mudah menggunakan fungsi buildSchema, di mana A medan pertanyaan bernama hello ditakrifkan. Kemudian, kami mencipta objek root yang mengandungi fungsi parser untuk medan pertanyaan. Akhir sekali, kami mencipta aplikasi Express dan menyediakan titik akhir GraphQL menggunakan perisian tengah graphqlHTTP. buildSchema函数创建了一个简单的GraphQL schema，其中定义了一个名为hello的查询字段。然后，我们创建了一个root对象，其中包含了查询字段的解析器函数。最后，我们创建了一个Express应用程序并使用graphqlHTTP中间件设置了GraphQL端点。

第三步：创建React组件
在项目的根目录下，创建一个名为App.js的文件，添加以下代码：

import React from 'react';
import { gql, useQuery } from '@apollo/client';

// 定义GraphQL查询
const GET_HELLO = gql`
  query {
    hello
  }
`;

function App() {
  const { loading, error, data } = useQuery(GET_HELLO);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;

  return (
    <div>
      <h1>{data.hello}</h1>
    </div>
  );
}

export default App;

在上述代码中，我们使用了@apollo/client库来执行GraphQL查询。我们定义了一个名为GET_HELLO的查询，并使用useQuery钩子来执行该查询。根据查询结果的不同状态，我们返回不同的组件。

第四步：渲染React应用
在项目的根目录下，编辑index.js文件并添加以下代码：

import React from 'react';
import ReactDOM from 'react-dom';
import { ApolloProvider, ApolloClient, InMemoryCache } from '@apollo/client';
import App from './App';

// 创建Apollo客户端
const client = new ApolloClient({
  uri: 'http://localhost:4000/graphql',
  cache: new InMemoryCache()
});

ReactDOM.render(
  <React.StrictMode>
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

我们使用@apollo/client库创建了一个Apollo客户端，并设置了GraphQL端点的URL。然后，我们使用ApolloProvider

Langkah 3: Cipta Komponen Reaksi

Dalam direktori akar projek, buat fail bernama App.js dan tambah kod berikut:

npm start

Dalam kod di atas, kami menggunakan @apollo/client perpustakaan untuk melaksanakan pertanyaan GraphQL. Kami mentakrifkan pertanyaan yang dipanggil <code>GET_HELLO dan menggunakan cangkuk useQuery untuk melaksanakan pertanyaan. Bergantung pada status hasil pertanyaan, kami mengembalikan komponen yang berbeza.

Langkah 4: Render aplikasi React

Dalam direktori akar projek, edit fail index.js dan tambahkan kod berikut:
rrreee

Kami mencipta klien Apollo menggunakan @apollo/client library , dan menetapkan URL titik akhir GraphQL. Kami kemudian mengikat klien Apollo ke aplikasi React menggunakan komponen ApolloProvider. 🎜🎜Langkah 5: Jalankan aplikasi 🎜Dalam baris arahan, gunakan arahan berikut untuk memulakan aplikasi: 🎜rrreee🎜Kini, kita boleh melihat antara muka GraphQL dengan mengakses http://localhost:4000/graphql dan dengan mengakses http : //localhost:3000 untuk mengakses aplikasi React kami. 🎜🎜Kesimpulan🎜Artikel ini menerangkan cara membina antara muka API berskala menggunakan React dan GraphQL. Dengan kod sampel untuk React dan GraphQL, kami menunjukkan cara menyediakan pelayan Express, mencipta skema dan penyelesai GraphQL dan melaksanakan pertanyaan GraphQL dalam aplikasi React. Menggunakan React dan GraphQL, kami boleh membina antara muka API yang cekap, fleksibel dan boleh diperluas untuk memenuhi keperluan skalabiliti dengan lebih baik. 🎜

Atas ialah kandungan terperinci Cara membina antara muka API berskala dengan React dan GraphQL. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!