Rumah >hujung hadapan web >tutorial js >Pelanggan Apollo untuk Pengurusan Negeri GraphQL dalam React: Memudahkan Pengambilan Data dan Caching
Apollo Client ialah perpustakaan JavaScript popular yang memudahkan pengurusan data untuk API GraphQL. Ia membolehkan anda mengurus kedua-dua data tempatan dan jauh dalam aplikasi React anda dengan cekap dan menyediakan ciri berkuasa seperti caching, kemas kini masa nyata, penomboran dan kelompok pertanyaan. Dengan Apollo Client, pembangun boleh berinteraksi dengan pelayan GraphQL menggunakan pertanyaan dan mutasi dengan cara yang lancar dan deklaratif.
Apollo Client berintegrasi dengan baik dengan React dan biasanya digunakan untuk mengurus keadaan dan melaksanakan operasi seperti mengambil, menyimpan cache dan mengemas kini data daripada pelayan GraphQL. Ia mengurangkan keperluan untuk perpustakaan pengurusan negeri yang kompleks seperti Redux dan menawarkan pendekatan yang lebih mudah untuk mengurus data yang terikat dengan komponen UI anda.
Untuk menggunakan Apollo Client dalam aplikasi React, anda mesti terlebih dahulu membungkus aplikasi anda dengan komponen ApolloProvider. Komponen ini menjadikan contoh Pelanggan Apollo tersedia di seluruh pepohon komponen anda melalui API Konteks React.
import React from 'react'; import ReactDOM from 'react-dom'; import { ApolloProvider, InMemoryCache } from '@apollo/client'; import App from './App'; // Initialize Apollo Client with a cache const client = new ApolloClient({ uri: 'https://your-graphql-endpoint.com/graphql', cache: new InMemoryCache(), }); ReactDOM.render( <ApolloProvider client={client}> <App /> </ApolloProvider>, document.getElementById('root') );
Dalam Pelanggan Apollo, pertanyaan digunakan untuk mengambil data daripada pelayan GraphQL. Anda boleh menggunakan cangkuk useQuery untuk mengambil data dalam komponen React anda. Cangkuk ini secara automatik mengendalikan pemuatan, keadaan ralat dan caching untuk anda.
import React from 'react'; import { useQuery, gql } from '@apollo/client'; // Define a query to fetch data from the GraphQL server const GET_ITEMS = gql` query GetItems { items { id name description } } `; const ItemsList = () => { const { loading, error, data } = useQuery(GET_ITEMS); if (loading) return <p>Loading...</p>; if (error) return <p>Error: {error.message}</p>; return ( <ul> {data.items.map(item => ( <li key={item.id}> <h3>{item.name}</h3> <p>{item.description}</p> </li> ))} </ul> ); }; export default ItemsList;
Mutasi digunakan untuk mengubah suai data pada pelayan (cth., mencipta, mengemas kini atau memadam rekod). Anda boleh menggunakan cangkuk useMutation untuk melakukan mutasi dalam komponen React anda.
import React from 'react'; import ReactDOM from 'react-dom'; import { ApolloProvider, InMemoryCache } from '@apollo/client'; import App from './App'; // Initialize Apollo Client with a cache const client = new ApolloClient({ uri: 'https://your-graphql-endpoint.com/graphql', cache: new InMemoryCache(), }); ReactDOM.render( <ApolloProvider client={client}> <App /> </ApolloProvider>, document.getElementById('root') );
Apollo Client menggunakan caching secara lalai. Ciri ini membantu mengelakkan permintaan rangkaian yang tidak diperlukan dan meningkatkan prestasi dengan menyimpan hasil pertanyaan sebelumnya dalam cache dalam memori.
Apabila anda membuat pertanyaan, Apollo Client menyemak cache secara automatik untuk melihat sama ada data telah diambil. Jika data wujud, ia akan mengembalikannya dengan segera. Jika tidak, ia menghantar permintaan rangkaian.
import React from 'react'; import { useQuery, gql } from '@apollo/client'; // Define a query to fetch data from the GraphQL server const GET_ITEMS = gql` query GetItems { items { id name description } } `; const ItemsList = () => { const { loading, error, data } = useQuery(GET_ITEMS); if (loading) return <p>Loading...</p>; if (error) return <p>Error: {error.message}</p>; return ( <ul> {data.items.map(item => ( <li key={item.id}> <h3>{item.name}</h3> <p>{item.description}</p> </li> ))} </ul> ); }; export default ItemsList;
Apabila berurusan dengan set data yang besar, penomboran selalunya diperlukan. Apollo Client menyediakan fungsi fetchMore untuk memuatkan data tambahan sebagai tindak balas kepada tindakan pengguna seperti menatal atau mengklik "Muat Lagi."
import React, { useState } from 'react'; import { useMutation, gql } from '@apollo/client'; // Define a mutation to add a new item const ADD_ITEM = gql` mutation AddItem($name: String!, $description: "String!) {" addItem(name: $name, description: "$description) {" id name description } } `; const AddItemForm = () => { const [name, setName] = useState(''); const [description, setDescription] = useState(''); const [addItem, { loading, error }] = useMutation(ADD_ITEM); const handleSubmit = (e) => { e.preventDefault(); addItem({ variables: { name, description }, onCompleted: (data) => { // Handle the data after the mutation is successful console.log('Item added:', data.addItem); }, }); }; if (loading) return <p>Adding item...</p>; if (error) return <p>Error: {error.message}</p>; return ( <form onSubmit={handleSubmit}> <input type="text" placeholder="Name" value={name} onChange={(e) => setName(e.target.value)} /> <input type="text" placeholder="Description" value={description} onChange={(e) => setDescription(e.target.value)} /> <button type="submit">Add Item</button> </form> ); }; export default AddItemForm;
Apollo Client memudahkan pengambilan data dengan GraphQL, memastikan aplikasi anda hanya mendapatkan semula data yang diperlukan.
Dengan caching terbina dalamnya, Apollo Client mengurangkan bilangan permintaan kepada pelayan dan menjadikan aplikasi anda lebih responsif dengan menyampaikan data daripada cache.
Apollo Client menyokong langganan, yang membolehkan anda mendengar kemas kini data masa nyata. Ini berguna untuk membina aplikasi masa nyata seperti apl sembang atau papan pemuka langsung.
Apollo Client membenarkan anda mengambil data secara deklaratif menggunakan pertanyaan GraphQL, menjadikan komponen React anda lebih mudah dan lebih mudah untuk difikirkan.
Apollo Client menyediakan sokongan untuk kemas kini UI yang optimistik, membolehkan anda mengemas kini UI sebelum pelayan mengesahkan perubahan. Ini menghasilkan pengalaman pengguna yang lebih lancar.
import React from 'react'; import ReactDOM from 'react-dom'; import { ApolloProvider, InMemoryCache } from '@apollo/client'; import App from './App'; // Initialize Apollo Client with a cache const client = new ApolloClient({ uri: 'https://your-graphql-endpoint.com/graphql', cache: new InMemoryCache(), }); ReactDOM.render( <ApolloProvider client={client}> <App /> </ApolloProvider>, document.getElementById('root') );
import React from 'react'; import { useQuery, gql } from '@apollo/client'; // Define a query to fetch data from the GraphQL server const GET_ITEMS = gql` query GetItems { items { id name description } } `; const ItemsList = () => { const { loading, error, data } = useQuery(GET_ITEMS); if (loading) return <p>Loading...</p>; if (error) return <p>Error: {error.message}</p>; return ( <ul> {data.items.map(item => ( <li key={item.id}> <h3>{item.name}</h3> <p>{item.description}</p> </li> ))} </ul> ); }; export default ItemsList;
Apollo Client ialah alat yang berkuasa untuk mengurus data GraphQL dalam aplikasi React. Ia menyediakan sokongan terbina dalam untuk menyoal dan mengubah data, caching, penomboran dan kemas kini data masa nyata. Dengan menggunakan Apollo Client, anda boleh menyelaraskan proses pengurusan data anda, meningkatkan prestasi dan menumpukan pada membina aplikasi anda daripada mengurus sistem pengurusan keadaan yang kompleks.
Atas ialah kandungan terperinci Pelanggan Apollo untuk Pengurusan Negeri GraphQL dalam React: Memudahkan Pengambilan Data dan Caching. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!