Aplikasi dan Kelebihan GraphQL dalam Aplikasi Web Moden-tutorial js-php.cn

Applications and Advantages of GraphQL in Modern Web Applications

GraphQL ialah bahasa pertanyaan API moden yang digunakan secara meluas dalam aplikasi web moden kerana ia menyediakan cara yang cekap, fleksibel dan berkuasa untuk mendapatkan data

Contoh aplikasi pantas asas GraphQL:

1. Tetapan hujung belakang (menggunakan graphql-yoga)

Pertama, kita perlu mencipta pelayan GraphQL. Pasang graphql-yoga dan buat skema GraphQL yang mudah:

npm init -y
npm install graphql yoga graphql-yoga

# server.js
const { GraphQLServer } = require('graphql-yoga');

const typeDefs = `
  type Query {
    hello: String
  }

  type Mutation {
    addMessage(message: String!): String
  }
`;

const resolvers = {
  Query: {
    hello: () => 'Hello world!',
  },
  Mutation: {
    addMessage: (_, { message }) => `You added the message "${message}"`,
  },
};

const server = new GraphQLServer({ typeDefs, resolvers });
server.start(() => console.log(`Server is running on http://localhost:4000`));

Salin selepas log masuk

2. Persediaan bahagian hadapan (menggunakan Apollo Client)

Seterusnya, kami perlu mengkonfigurasi Pelanggan Apollo dalam aplikasi bahagian hadapan untuk berkomunikasi dengan pelayan GraphQL kami:

npm install apollo-boost @apollo/client graphql

# client.js
import ApolloClient from 'apollo-boost';
import { InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  uri: 'http://localhost:4000/graphql',
  cache: new InMemoryCache(),
});

export default client;

Salin selepas log masuk

3. Tulis komponen bahagian hadapan

Kini, kami menggunakan Apollo Client dalam komponen React untuk melakukan pertanyaan dan mutasi:

// App.js
import React from 'react';
import { gql, useQuery, useMutation } from '@apollo/client';
import client from './client';

const GET_HELLO = gql`
  query GetHello {
    hello
  }
`;

const ADD_MESSAGE_MUTATION = gql`
  mutation AddMessage($message: String!) {
    addMessage(message: $message)
  }
`;

function App() {
  const { loading, error, data } = useQuery(GET_HELLO);
  const [addMessage, { data: mutationData }] = useMutation(ADD_MESSAGE_MUTATION);

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

  return (
    <div>
      <h1>{data.hello}</h1>
      <button onClick={() => addMessage({ variables: { message: 'Hello from frontend!' } })}>
        Add Message
      </button>
      {mutationData && <p>New message: {mutationData.addMessage}</p>}
    </div>
  );
}
export default App;

Salin selepas log masuk

Kami membuat pertanyaan GET_HELLO untuk mendapatkan salam pelayan dan memaparkannya pada halaman. Pada masa yang sama, kami mentakrifkan operasi mutasi ADD_MESSAGE_MUTATION, yang akan menghantar mesej baharu kepada pelayan apabila pengguna mengklik butang.

4. Jalankan aplikasi

Mulakan pelayan bahagian belakang:

node server.js

Salin selepas log masuk

Kemudian mulakan aplikasi bahagian hadapan, dengan anggapan Cipta Apl Reaksi:

npm start

Salin selepas log masuk

Pertanyaan Asas GraphQL

1. Bahasa Pertanyaan: Pertanyaan, Mutasi, Langganan

Dalam GraphQL, pertanyaan dan mutasi ialah rentetan yang diwakili oleh struktur seperti JSON. Berikut ialah contoh mudah:

# Query Example
query GetUser {
  user(id: 1) {
    name
    email
  }
}

# Mutation Example
mutation CreateUser {
  createUser(name: "Alice", email: "alice@example.com") {
    id
    name
  }
}

# Subscription Example (Assuming WebSocket)
subscription OnNewUser {
  newUser {
    id
    name
  }
}

Salin selepas log masuk

Dalam kod di atas, pertanyaan GetUser meminta nama dan e-mel pengguna dengan ID pengguna 1. Mutasi CreateUser mencipta pengguna baharu dan mengembalikan ID dan nama pengguna baharu. Langganan OnNewUser menunggu pengguna baharu dibuat dan mengembalikan maklumat pengguna baharu.

2. Sistem Jenis

Di bahagian belakang, kami mentakrifkan skema GraphQL untuk menerangkan jenis ini:

type User {
  id: ID!
  name: String!
  email: String!
}

type Mutation {
  createUser(name: String!, email: String!): User
}

type Subscription {
  newUser: User
}

Salin selepas log masuk

Di sini kami mentakrifkan jenis objek Pengguna, jenis Mutasi untuk operasi mutasi dan jenis Langganan untuk operasi langganan.

3. Struktur pertanyaan: medan dan parameter

Struktur pertanyaan terdiri daripada medan dan parameter. Dalam contoh pertanyaan di atas, pengguna ialah medan dan id serta e-mel ialah subbidang bagi medan pengguna. Parameter seperti id: 1 digunakan untuk menyesuaikan pertanyaan.

4. Hierarki dan bersarang

Pertanyaan GrafikQL boleh bersarang. Berikut ialah contoh yang lebih kompleks:

query GetUsersAndPosts {
  users {
    id
    name
    posts {
      id
      title
      content
      author {
        id
        name
      }
    }
  }
}

Salin selepas log masuk

Pertanyaan ini meminta semua pengguna dan siaran masing-masing, yang juga termasuk maklumat tentang pengarang. Hierarki membenarkan berbilang peringkat data diambil dalam satu permintaan.

Contoh Kod Pelanggan (Menggunakan Pelanggan Apollo)

npm init -y
npm install graphql yoga graphql-yoga

# server.js
const { GraphQLServer } = require('graphql-yoga');

const typeDefs = `
  type Query {
    hello: String
  }

  type Mutation {
    addMessage(message: String!): String
  }
`;

const resolvers = {
  Query: {
    hello: () => 'Hello world!',
  },
  Mutation: {
    addMessage: (_, { message }) => `You added the message "${message}"`,
  },
};

const server = new GraphQLServer({ typeDefs, resolvers });
server.start(() => console.log(`Server is running on http://localhost:4000`));

Salin selepas log masuk

Dalam komponen React ini, kami menggunakan useQuery untuk mengambil data daripada pelayan GraphQL dan memberikan maklumat tentang pengguna dan siaran mereka. Beginilah cara pertanyaan GraphQL, sistem jenis dan hierarki dimainkan.

Skema GraphQL

GraphQL Schema Definition Language (SDL) ialah bahasa untuk menerangkan skema GraphQL. Ia mentakrifkan jenis data, pertanyaan, mutasi dan arahan dalam format ringkas dan boleh dibaca manusia.

Tentukan jenis
Mula-mula, mari kita tentukan beberapa jenis data asas. Contohnya, tentukan jenis Pengguna dan jenis Siaran.

npm install apollo-boost @apollo/client graphql

# client.js
import ApolloClient from 'apollo-boost';
import { InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  uri: 'http://localhost:4000/graphql',
  cache: new InMemoryCache(),
});

export default client;

Salin selepas log masuk

Di sini, jenis Pengguna mempunyai id, nama pengguna, medan e-mel dan medan siaran yang dipautkan kepada berbilang Siaran. Jenis Siaran mengandungi id, tajuk, medan kandungan dan medan pengarang yang menunjuk kepada Pengguna.

Akar pertanyaan dan akar mutasi
Seterusnya, tentukan jenis akar pertanyaan GraphQL (Pertanyaan) dan punca mutasi (Mutasi), yang merupakan titik masuk untuk pelanggan meminta data dan mengubah suai data.

// App.js
import React from 'react';
import { gql, useQuery, useMutation } from '@apollo/client';
import client from './client';

const GET_HELLO = gql`
  query GetHello {
    hello
  }
`;

const ADD_MESSAGE_MUTATION = gql`
  mutation AddMessage($message: String!) {
    addMessage(message: $message)
  }
`;

function App() {
  const { loading, error, data } = useQuery(GET_HELLO);
  const [addMessage, { data: mutationData }] = useMutation(ADD_MESSAGE_MUTATION);

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

  return (
    <div>
      <h1>{data.hello}</h1>
      <button onClick={() => addMessage({ variables: { message: 'Hello from frontend!' } })}>
        Add Message
      </button>
      {mutationData && <p>New message: {mutationData.addMessage}</p>}
    </div>
  );
}
export default App;

Salin selepas log masuk

Dalam jenis Pertanyaan, kami mentakrifkan pertanyaan untuk mendapatkan pengguna tunggal, semua pengguna, siaran tunggal dan semua siaran. Dalam jenis Mutasi, kami mentakrifkan operasi untuk mencipta pengguna baharu dan siaran baharu.

Memahami dan menggunakan Arahan
Arahan ialah arahan dalam skema GraphQL yang mengubah tingkah laku pelaksanaan. Ia boleh digunakan pada mana-mana bahagian definisi sistem jenis, seperti medan, jenis input, jenis objek, dll. Berikut menunjukkan cara menggunakan arahan @auth tersuai untuk mengawal hak akses.

Pertama, katakan kami mentakrifkan arahan @auth untuk menyekat akses kepada medan tertentu dan memerlukan pengguna log masuk.

node server.js

Salin selepas log masuk

Seterusnya, gunakan arahan ini dalam skema:

npm start

Salin selepas log masuk

Dalam contoh di atas, medan pertanyaan saya dan nama pengguna boleh diakses tanpa kebenaran khas, tetapi untuk mengakses medan e-mel pengguna memerlukan kebenaran pentadbir (dinyatakan oleh arahan @auth(requires: ADMIN).

Aplikasi Lanjutan GraphQL

1. Penomboran

Gunakan penomboran berasaskan Kursor GraphQL untuk meningkatkan prestasi dan pengalaman pengguna.

Takrifan skema:

# Query Example
query GetUser {
  user(id: 1) {
    name
    email
  }
}

# Mutation Example
mutation CreateUser {
  createUser(name: "Alice", email: "alice@example.com") {
    id
    name
  }
}

# Subscription Example (Assuming WebSocket)
subscription OnNewUser {
  newUser {
    id
    name
  }
}

Salin selepas log masuk

Contoh penyelesai:

type User {
  id: ID!
  name: String!
  email: String!
}

type Mutation {
  createUser(name: String!, email: String!): User
}

type Subscription {
  newUser: User
}

Salin selepas log masuk

2. Ralat pengendalian

Sesuaikan pengendalian ralat untuk meningkatkan keupayaan pelanggan menangani ralat.

Contoh penyelesai:

query GetUsersAndPosts {
  users {
    id
    name
    posts {
      id
      title
      content
      author {
        id
        name
      }
    }
  }
}

Salin selepas log masuk

3. Arahan tersuai

Buat arahan tersuai untuk melaksanakan logik perniagaan atau keperluan keselamatan tertentu.

Takrifan skema:

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

const GET_USERS_AND_POSTS = gql`
  query GetUsersAndPosts {
    users {
      id
      name
      posts {
        id
        title
        content
        author {
          id
          name
        }
      }
    }
  }
`;

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

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

  return (
    <div>
      {data.users.map(user => (
        <div key={user.id}>
          <h2>{user.name}</h2>
          <ul>
            {user.posts.map(post => (
              <li key={post.id}>
                <h3>{post.title}</h3>
                <p>{post.content}</p>
                <p>Author: {post.author.name}</p>
              </li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}

export default App;

Salin selepas log masuk

Contoh penyelesai:

type User {
  id: ID!
  username: String!
  email: String!
  posts: [Post!]!
}

type Post {
  id: ID!
  title: String!
  content: String!
  author: User!
}

Salin selepas log masuk

Pastikan anda mendaftar pengendali arahan ini dalam konfigurasi pelayan GraphQL anda.

4. Persekutuan GraphQL

Persekutuan membenarkan membina API GraphQL tunggal yang terdiri daripada berbilang perkhidmatan.

Skema Perkhidmatan A:

npm init -y
npm install graphql yoga graphql-yoga

# server.js
const { GraphQLServer } = require('graphql-yoga');

const typeDefs = `
  type Query {
    hello: String
  }

  type Mutation {
    addMessage(message: String!): String
  }
`;

const resolvers = {
  Query: {
    hello: () => 'Hello world!',
  },
  Mutation: {
    addMessage: (_, { message }) => `You added the message "${message}"`,
  },
};

const server = new GraphQLServer({ typeDefs, resolvers });
server.start(() => console.log(`Server is running on http://localhost:4000`));

Salin selepas log masuk

Skema Perkhidmatan B:

npm install apollo-boost @apollo/client graphql

# client.js
import ApolloClient from 'apollo-boost';
import { InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  uri: 'http://localhost:4000/graphql',
  cache: new InMemoryCache(),
});

export default client;

Salin selepas log masuk

5. Pengoptimuman pertanyaan kompleks

Gunakan penyelesai medan GraphQL dan pemuat data untuk mengoptimumkan prestasi.

Contoh Pemuat Data:

// App.js
import React from 'react';
import { gql, useQuery, useMutation } from '@apollo/client';
import client from './client';

const GET_HELLO = gql`
  query GetHello {
    hello
  }
`;

const ADD_MESSAGE_MUTATION = gql`
  mutation AddMessage($message: String!) {
    addMessage(message: $message)
  }
`;

function App() {
  const { loading, error, data } = useQuery(GET_HELLO);
  const [addMessage, { data: mutationData }] = useMutation(ADD_MESSAGE_MUTATION);

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

  return (
    <div>
      <h1>{data.hello}</h1>
      <button onClick={() => addMessage({ variables: { message: 'Hello from frontend!' } })}>
        Add Message
      </button>
      {mutationData && <p>New message: {mutationData.addMessage}</p>}
    </div>
  );
}
export default App;

Salin selepas log masuk

Ciri dan Kelebihan GraphQL

Pengoptimuman prestasi: Dengan mendapatkan data atas permintaan, overhed penghantaran rangkaian dikurangkan dan kelajuan pemuatan halaman dipertingkatkan.
Kurangkan ralat: Pelanggan mentakrifkan struktur pertanyaan dan pelayan mengembalikan bentuk yang diharapkan, mengurangkan ralat yang disebabkan oleh ketidakpadanan antara muka.
Reka bentuk API yang lebih baik: Sistem jenis yang kukuh memastikan ketekalan dan ketepatan data, menjadikan API lebih mudah difahami dan diselenggara.
Kawalan pelanggan: Pelanggan boleh menentukan jumlah data yang perlu diperoleh dan masa untuk mendapatkannya, yang meningkatkan pengalaman pengguna.
Pengoptimuman cache: Pelanggan boleh melaksanakan strategi caching dengan lebih mudah berdasarkan struktur data yang dikembalikan.
Kurangkan kerumitan bahagian belakang: Bahagian belakang tidak lagi perlu mencipta berbilang titik akhir API untuk memenuhi keperluan pelanggan yang berbeza.

Atas ialah kandungan terperinci Aplikasi dan Kelebihan GraphQL dalam Aplikasi Web Moden. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!