Cara menggunakan React dan GraphQL untuk membina interaksi data hadapan dan belakang yang fleksibel

Cara menggunakan React dan GraphQL untuk membina interaksi data front-end dan back-end yang fleksibel

Dalam pembangunan aplikasi web moden, front- interaksi data hujung dan belakang adalah satu kemestian yang amat diperlukan. Untuk mencapai interaksi data yang cekap, fleksibel dan berskala, menggunakan gabungan React dan GraphQL ialah pilihan yang baik. Dalam artikel ini, saya akan memperkenalkan anda kepada cara menggunakan React dan GraphQL untuk membina interaksi data bahagian hadapan dan belakang yang fleksibel, serta menyediakan contoh kod khusus.

1. Apakah itu GraphQL?

GraphQL ialah satu set spesifikasi untuk bahasa pertanyaan dan masa jalan untuk API. Ia menyediakan cara yang fleksibel untuk menerangkan data yang diperlukan oleh aplikasi bahagian hadapan, dan boleh mengurangkan bilangan permintaan rangkaian dan meningkatkan kecekapan pemerolehan data. Berbanding dengan API RESTful tradisional, GraphQL membenarkan aplikasi bahagian hadapan untuk menentukan dengan tepat data yang mereka perlukan untuk diambil, tanpa perlu mengambil data yang tidak diperlukan daripada berbilang titik akhir.

2. Bagaimana hendak menggunakan React dan GraphQL?

1. Pasang kebergantungan berkaitan

Pertama sekali, anda perlu memasang beberapa kebergantungan yang diperlukan. Buka alat baris arahan, masukkan direktori projek, dan jalankan arahan berikut:

npm install react react-dom react-apollo graphql apollo-boost

2. Buat pelanggan Apollo

Dalam aplikasi React, kita boleh menggunakan Apollo Client untuk menguruskan komunikasi dengan pelayan GraphQL. Mula-mula, buka fail kemasukan projek (biasanya index.js), dan kemudian buat klien Apollo seperti berikut: 🎜#Dalam komponen React, kita boleh menggunakan komponen Query yang disediakan oleh Apollo Client untuk menghantar Pertanyaan GraphQL dan dapatkan data. Berikut ialah contoh:

import React from 'react';
import { ApolloProvider } from 'react-apollo';
import ApolloClient from 'apollo-boost';

const client = new ApolloClient({
  uri: 'http://localhost:4000/graphql' // GraphQL服务器的URL
});

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

Dalam kod di atas, kami mentakrifkan pertanyaan GraphQL untuk GET_USER dan menghantarnya sebagai atribut query Kepada < komponen kod>Pertanyaan. Kami juga meluluskan pembolehubah yang diperlukan untuk pertanyaan melalui atribut variables. Dalam fungsi panggil balik komponen, kami boleh mengakses maklumat seperti loading, error dan data. Berdasarkan maklumat ini, kami boleh memaparkan kandungan yang sepadan pada halaman.
3. Hantar perubahan GraphQL

   Query组件来发送GraphQL查询并获取数据。以下是一个示例：

   import React from 'react';
   import { Query } from 'react-apollo';
   import gql from 'graphql-tag';
   
   const GET_USER = gql`
     query GetUser($id: ID!) {
       user(id: $id) {
         id
         name
         email
       }
     }
   `;
   
   const User = ({ id }) => (
     <Query query={GET_USER} variables={{ id }}>
       {({ loading, error, data }) => {
         if (loading) return <p>Loading...</p>;
         if (error) return <p>Error :(</p>;
   
         const { user } = data;
   
         return (
           <div>
             <p>Name: {user.name}</p>
             <p>Email: {user.email}</p>
           </div>
         );
       }}
     </Query>
   );

   在上面的代码中，我们定义了一个GET_USER的GraphQL查询，并将其作为query属性传递给Query组件。我们还通过variables属性传递了查询所需的变量。在组件的回调函数中，我们可以访问loading、error和data等信息。根据这些信息，我们可以在页面上显示相应的内容。

   4. 发送GraphQL变更

   除了发送查询，我们还可以使用Apollo Client提供的Mutation组件来发送GraphQL变更。以下是一个示例：

   import React from 'react';
   import { Mutation } from 'react-apollo';
   import gql from 'graphql-tag';
   
   const CREATE_USER = gql`
     mutation CreateUser($input: CreateUserInput!) {
       createUser(input: $input) {
         id
         name
         email
       }
     }
   `;
   
   const CreateUser = () => (
     <Mutation mutation={CREATE_USER}>
       {(createUser, { data }) => (
         <div>
           <button onClick={() => {
             createUser({ variables: { input: { name: 'John', email: 'john@example.com' } } })
           }}>Create User</button>
         </div>
       )}
     </Mutation>
   );

   在上面的代码中，我们定义了一个CREATE_USER的GraphQL变更，并将其作为mutation属性传递给Mutation组件。在组件的回调函数中，我们可以通过调用createUserSelain menghantar pertanyaan, kami juga boleh menggunakan Mutasiyang disediakan oleh Apollo Client > komponen untuk menghantar perubahan GraphQL. Berikut ialah contoh:

   rrreee

   Dalam kod di atas, kami mentakrifkan mutasi GraphQL CREATE_USER dan menghantarnya sebagai atribut mutation Kepada Mutasi komponen. Dalam fungsi panggil balik komponen, kami boleh menghantar perubahan dengan memanggil fungsi createUser. Begitu juga, kami boleh memaparkan kandungan yang berkaitan pada halaman mengikut keperluan.

   3 Ringkasan

   Melalui contoh di atas, kita dapat melihat bahawa gabungan React dan GraphQL boleh mencapai interaksi data hadapan dan belakang yang cekap, fleksibel dan berskala. . Menggunakan React dan Apollo Client, kami boleh menghantar pertanyaan dan perubahan GraphQL dengan mudah, serta memaparkan serta memproses data pada halaman. Pendekatan ini boleh memudahkan kerumitan pembangunan bahagian hadapan dan memberikan pengalaman pengguna yang lebih baik.

   #🎜🎜# Saya harap artikel ini dapat membantu anda memahami cara menggunakan React dan GraphQL untuk membina interaksi data bahagian hadapan dan belakang yang fleksibel. Jika anda belum mencuba React dan GraphQL lagi, saya menggalakkan anda mencubanya dalam projek anda sendiri dan saya percaya anda akan mendapati betapa hebatnya mereka. Semoga anda mendapat hasil yang lebih baik dalam pembangunan web! #🎜🎜#

   Atas ialah kandungan terperinci Cara menggunakan React dan GraphQL untuk membina interaksi data hadapan dan belakang yang fleksibel. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!