GraphQL在現代Web應用中的應用與優勢详情 - 前端,javascript,react,graphql 天涯學館日志

GraphQL是一種現代的API查詢語言，它在現代Web應用中得到了廣泛的應用，因為它提供了一種高效、靈活且強大的方式來獲取數據

GraphQL基礎快速應用示例：

1. 後端設置（使用graphql-yoga）

首先，我們需要創建一個GraphQL服務器。安裝graphql-yoga並創建一個簡單的GraphQL schema：

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`));

2. 前端設置（使用Apollo Client）

接着，我們需要在前端應用中配置Apollo Client，與我們的GraphQL服務器通信：

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;

3. 編寫前端組件

現在，我們在React組件中使用Apollo Client執行查詢和變更：

// 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;

我們創建了一個GET_HELLO查詢來獲取服務器的問候語，並在頁面上顯示。同時，我們定義了一個ADD_MESSAGE_MUTATION變更操作，當用户點擊按鈕時，它將向服務器發送一個新消息。

4. 運行應用

啓動後端服務器：

node server.js

然後啓動前端應用，假設使用Create React App：

npm start

GraphQL基本查詢

1. 查詢語言：查詢、突變、訂閲

在GraphQL中，查詢和突變是通過JSON-like結構表示的字符串。這裏有一個簡單的示例：

# 查詢示例
query GetUser {
  user(id: 1) {
    name
    email
  }
}

# 突變示例
mutation CreateUser {
  createUser(name: "Alice", email: "alice@example.com") {
    id
    name
  }
}

# 訂閲示例（假設使用WebSocket）
subscription OnNewUser {
  newUser {
    id
    name
  }
}

在上述代碼中，GetUser查詢請求了用户ID為1的用户姓名和電子郵件。CreateUser突變創建了一個新用户並返回新用户的ID和姓名。OnNewUser訂閲等待新用户被創建時觸發，返回新用户的信息。

2. 類型系統

在後端，我們定義GraphQL schema來描述這些類型：

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

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

type Subscription {
  newUser: User
}

這裏定義了一個User對象類型，一個Mutation類型用於突變操作，和一個Subscription類型用於訂閲操作。

3. 查詢結構：字段和參數

查詢結構由字段和參數組成。在上面的查詢示例中，user是字段，id和email是user字段的子字段。參數如id: 1用於定製查詢。

4. 層次結構和嵌套

GraphQL查詢可以嵌套，以下是一個更復雜的例子：

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

此查詢請求所有用户及其各自的帖子，帖子還包含了作者的信息。層次結構允許一次請求獲取多個級別的數據。

客户端代碼示例（使用Apollo Client）

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;

在這個React組件中，我們使用useQuery從GraphQL服務器獲取數據，並渲染用户和他們的帖子信息。這就是GraphQL查詢、類型系統和層次結構在實際應用中的體現。

GraphQL Schema

GraphQL Schema Definition Language（SDL）是一種用於描述GraphQL schema的語言，它以簡潔的人類可讀格式定義了數據類型、查詢、突變和指令等。

定義類型
首先，我們定義一些基本的數據類型。比如，定義一個User類型和一個Post類型。

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

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

這裏，User類型有id、username、email字段，以及一個關聯到多個Post的posts字段。而Post類型包含id、title、content字段，還有一個指向User的author字段。

查詢根和突變根
接下來，定義GraphQL的查詢根（Query）和突變根（Mutation）類型，它們是客户端請求數據和修改數據的入口點。

type Query {
  user(id: ID!): User
  allUsers: [User!]!
  post(id: ID!): Post
  allPosts: [Post!]!
}

type Mutation {
  createUser(username: String!, email: String!): User
  createPost(title: String!, content: String!, userId: ID!): Post
}

在Query類型中，我們定義了獲取單個用户、所有用户、單篇帖子和所有帖子的查詢。而在Mutation類型中，我們定義了創建新用户和新帖子的操作。

Directives的理解和使用
Directives是GraphQL schema中用於改變執行行為的指令。它們可以被應用到類型系統定義的任何部分，比如字段、輸入類型、對象類型等。下面展示如何使用一個自定義的@auth指令來控制訪問權限。

首先，假設我們定義了一個@auth指令，用於限制對某些字段的訪問，要求用户必須登錄。

scalar DateTime

directive @auth(requires: Role = ADMIN) on FIELD_DEFINITION

enum Role {
  ADMIN
  USER
}

接着，在schema中應用這個指令：

type Query {
  me: User @auth(requires: USER)
}

type User {
  id: ID!
  username: String!
  email: String! @auth(requires: ADMIN)
  posts: [Post!]!
}

在上面的例子中，me查詢和username字段無需特殊權限即可訪問，但訪問用户的email字段則需要管理員權限（通過@auth(requires: ADMIN)指令指定）。

GraphQL 高級應用

1. 分頁

使用GraphQL Cursor-based分頁，以提高性能和用户體驗。

Schema定義：

type PageInfo {
  hasNextPage: Boolean!
  hasPreviousPage: Boolean!
  startCursor: String
  endCursor: String
}

extend type Query {
  users(first: Int, after: String, last: Int, before: String): [User!]!
  usersConnection(first: Int, after: String, last: Int, before: String): UserConnection!
}

type UserConnection {
  edges: [UserEdge!]!
  pageInfo: PageInfo!
}

type UserEdge {
  cursor: String!
  node: User!
}

Resolver示例：

const resolvers = {
  Query: {
    users: (parent, args, context, info) => {
      // 實現邏輯，根據args.first, args.after等參數進行分頁查詢
    },
    usersConnection: (parent, args, context, info) => {
      // 實現邏輯，返回帶有分頁信息的UserConnection對象
    },
  },
};

2. 錯誤處理

自定義錯誤處理，提升客户端對錯誤的處理能力。

Resolver示例：

const resolvers = {
  Mutation: {
    createUser: async (parent, args, context, info) => {
      try {
        // 創建用户邏輯
      } catch (error) {
        throw new Error("Failed to create user", { extensions: { code: "USER_CREATION_FAILED" } });
      }
    },
  },
};

3. 自定義指令

創建自定義指令以實現特定業務邏輯或安全需求。

Schema定義：

directive @log on FIELD_DEFINITION
Resolver示例：

javascript
const directiveResolvers = {
  log: (next, source, args, context, info) => {
    console.log(`Executing field: ${info.fieldName}`);
    return next();
  },
};

確保在GraphQL服務器配置中註冊此指令處理器。

4. GraphQL Federation

Federation允許構建由多個服務組成的單一GraphQL API。

Service A Schema:

extend schema
  @link(url: "https://specs.apollo.dev/federation/v2.0", import: ["@key", "@shareable"])

type Product @key(fields: "upc") {
  upc: String! @external
  price: Float
}

Service B Schema:

extend schema
  @link(url: "https://specs.apollo.dev/federation/v2.0", import: ["@key"])

type Review {
  body: String
  author: User @provides(fields: "username")
}

extend type User @key(fields: "id") {
  id: ID! @external
  username: String
}

5. 複雜查詢優化

利用GraphQL的字段解析器和數據加載器進行性能優化。

Data Loader示例：

const dataLoader = new DataLoader(keys => db.batchLoadUsers(keys));

const resolvers = {
  User: {
    friends: (parent, args, context, info) => {
      return dataLoader.load(parent.id);
    },
  },
};

GraphQL 特點與優勢

性能優化：通過按需獲取數據，減少了網絡傳輸開銷，提高了頁面加載速度。
減少錯誤：客户端定義查詢結構，服務器返回預期的形狀，降低了由於接口不匹配導致的錯誤。
更好的API設計：強類型系統確保了數據的一致性和正確性，使得API更加易於理解和維護。
客户端控制：客户端可以決定獲取多少數據，何時獲取，提高了用户體驗。
緩存優化：客户端可以根據返回的數據結構更容易地進行緩存策略的實施。
減少後端複雜性：後端不再需要為了適應不同客户端的需求而創建多個API端點。

2500G計算機入門到高級架構師開發資料超級大禮包免費送！

天涯學館日志

@kevinzhw

标签

前端 (1157)

Javascript (735)

vue.js (260)

react (167)

typescript (130)

前端工程化 (32)

graphql (26)

xss (25)

pwa (25)

redux (19)

eslint (13)

prettier (9)

动态

GraphQL在現代Web應用中的應用與優勢 - 动态详情

GraphQL基礎快速應用示例：

1. 後端設置（使用graphql-yoga）

2. 前端設置（使用Apollo Client）

3. 編寫前端組件

4. 運行應用

GraphQL基本查詢

1. 查詢語言：查詢、突變、訂閲

2. 類型系統

3. 查詢結構：字段和參數

4. 層次結構和嵌套

客户端代碼示例（使用Apollo Client）

GraphQL Schema

GraphQL 高級應用

1. 分頁

2. 錯誤處理

3. 自定義指令

4. GraphQL Federation

5. 複雜查詢優化

GraphQL 特點與優勢

Add a new 评论

天涯學館 日志

@kevinzhw

标签

前端 (1157)

Javascript (735)

vue.js (260)

react (167)

typescript (130)

前端工程化 (32)

graphql (26)

xss (25)

pwa (25)

redux (19)

eslint (13)

prettier (9)

动态

GraphQL在現代Web應用中的應用與優勢 - 动态 详情

GraphQL基礎快速應用示例：

1. 後端設置（使用graphql-yoga）

2. 前端設置（使用Apollo Client）

3. 編寫前端組件

4. 運行應用

GraphQL基本查詢

1. 查詢語言：查詢、突變、訂閲

2. 類型系統

3. 查詢結構：字段和參數

4. 層次結構和嵌套

客户端代碼示例（使用Apollo Client）

GraphQL Schema

GraphQL 高級應用

1. 分頁

2. 錯誤處理

3. 自定義指令

4. GraphQL Federation

5. 複雜查詢優化

GraphQL 特點與優勢

Add a new 评论

天涯學館日志

GraphQL在現代Web應用中的應用與優勢 - 动态详情