使用Apollo＆React探索GraphQl：構建超級英雄數據庫

深入graphql世界，發現為什麼它會產生如此多的興奮！本教程提供了對GraphQL的明確解釋，並提供了動手體驗。

首先，讓我們解決一個核心問題：什麼是

graphql？ 這不是一些晦澀的計算器函數；相反，這是一種強大的查詢語言（或更確切地說是查詢規範），用於從不同來源獲取數據。 它的主要優勢？ 它在單個網絡請求中僅檢索> ，消除了傳統REST API的效率低下。 本教程將Apollo服務器用作端點，並與Apollo客戶端一起使用React應用程序來訪問數據。 我們將從服務器開始。

密鑰概念：

graphQl是一種查詢語言，可在任何數據源的單個請求中提供精確的數據檢索，超過效率和靈活性的REST API。

> Apollo服務器（端點）和使用Apollo客戶端的React應用程序對於GraphQl數據利用率至關重要。
• >使用超級英雄數據庫示例。
>它展示了前端和後端開發如何在很大程度上獨立進行，而模式則充當界面。
設置Apollo服務器：
• >

創建一個目錄。 >

>導航到它並安裝必要的軟件包：

1. apollo-server
2. 創建
和add：

npm install apollo-server apollo-server-express graphql

3. 這將導入Apollo服務器和GraphQl查詢解析的基本組件。 index.js
創建GraphQl架構：

const { ApolloServer, gql } = require('apollo-server');

>

接下來，在

>中定義架構：

> 這定義了

和

>類型和兩個查詢：index.js（返回所有用戶）和

>（返回用戶ID）。

const typeDefs = gql`
  type User {
    id: ID!
    name: String
    superpowers: [Superpower]!
  }

  type Superpower {
    id: ID!
    text: String
  }

  type Query {
    users: [User]
    user(id: ID!): User
  }
`;

添加示例數據：User Superpower>將模擬數據添加到users：user

>這提供了用於查詢的示例數據。 請記住，GraphQl不僅限於JavaScript數組；它可以連接到任何數據源。

定義解析器：

index.js>解析器解釋查詢。將它們添加到

>：

const users = [
  { id: '1', name: 'Peter Parker', superpowers: [{ id: '1', text: 'Web slinging' }, { id: '2', text: 'Spidey sense' }] },
  { id: '2', name: 'Tony Stark', superpowers: [{ id: '3', text: 'Industrial design' }, { id: '4', text: 'Robotic fashion' }] }
];

>

解析器返回所有用戶，而> 通過ID找到用戶。

index.js啟動服務器：

const resolvers = {
  Query: {
    users: () => users,
    user: (root, { id }) => users.find(user => user.id === id),
  },
};

通過實例化和啟動服務器：

usersrunuser>並訪問

>的GraphQl Playground

交互式查詢：

在操場上嘗試這些查詢：index.js

• >提取彼得·帕克的名字：

npm install apollo-server apollo-server-express graphql

• >提取彼得·帕克的姓名和超級大國：

const { ApolloServer, gql } = require('apollo-server');

• 獲取所有用戶及其超級大國：

const typeDefs = gql`
  type User {
    id: ID!
    name: String
    superpowers: [Superpower]!
  }

  type Superpower {
    id: ID!
    text: String
  }

  type Query {
    users: [User]
    user(id: ID!): User
  }
`;

與React集成：

：

創建一個React App：

const users = [
  { id: '1', name: 'Peter Parker', superpowers: [{ id: '1', text: 'Web slinging' }, { id: '2', text: 'Spidey sense' }] },
  { id: '2', name: 'Tony Stark', superpowers: [{ id: '3', text: 'Industrial design' }, { id: '4', text: 'Robotic fashion' }] }
];

修改
2. ：src/index.js

const resolvers = {
  Query: {
    users: () => users,
    user: (root, { id }) => users.find(user => user.id === id),
  },
};

替換
3. ：src/App.js

const server = new ApolloServer({ typeDefs, resolvers });
server.listen().then(({ url }) => console.log(`Apollo server started at ${url}`));

run

在npm start>目錄中以查看my-graphql>的結果 http://localhost:3000/本教程為使用GraphQl提供了基礎。 探索突變（用於數據修改）和其他高級功能，以進一步提高您的技能。 快樂的編碼！

GraphQl FAQS：

• >什麼是graphql？

  apis的查詢語言，以及針對您的數據執行這些查詢的運行時間。 這是一種更有效，更靈活的替代方案。 >

• graphql vs. ret：

  REST使用多個端點，而GraphQl允許客戶端僅在單個查詢中請求所需的數據，從而防止過度提取和取得不足。

>鍵GraphQl特徵：
• 分層查詢結構，強鍵入，具有訂閱的實時數據和內省（查詢模式本身）。
  graphQl架構：
定義數據類型和關係，充當客戶端和服務器之間的合同。
• >
  查詢結構：層次結構，反映響應數據結構。 客戶請求特定字段並嵌套以進行複雜的數據檢索。

• 分辨率：

  函數定義瞭如何獲取或突變數據的特定模式字段的數據。 他們將查詢連接到數據源。
>

以上是使用Apollo＆React探索GraphQl：構建超級英雄數據庫的詳細內容。更多資訊請關注PHP中文網其他相關文章！