Giới thiệu đầy đủ về Apollo, bộ công cụ GraphQL

Quan tâm đến việc học JavaScript? Nhận ebook miễn phí của tôi tại jshandbook.com

Giới thiệu về Apollo

Trong vài năm qua, GraphQL đã trở nên cực kỳ phổ biến như một cách tiếp cận khác để xây dựng API qua REST.

GraphQL là một cách tuyệt vời để cho phép khách hàng quyết định dữ liệu nào họ muốn truyền qua mạng, thay vì máy chủ gửi một bộ dữ liệu cố định.

Ngoài ra, nó cho phép bạn chỉ định các tài nguyên lồng nhau, giảm bớt việc quay lại đôi khi cần thiết khi xử lý các API REST.

Apollo là một nhóm và cộng đồng xây dựng dựa trên GraphQL và cung cấp các công cụ khác nhau giúp bạn xây dựng các dự án của mình.

Logo Apollo lịch sự của apollographql.com

Các công cụ được cung cấp bởi Apollo chủ yếu là ba: Client, Server, Engine.

Apollo Client giúp bạn sử dụng API GraphQL, với sự hỗ trợ cho các công nghệ web frontend phổ biến nhất như React, Vue, Angular, Ember và Meteor. Nó cũng hỗ trợ phát triển bản địa trên iOS và Android.

Apollo Server là một phần máy chủ của GraphQL, giao diện với phụ trợ của bạn và gửi phản hồi lại cho các yêu cầu của máy khách.

Apollo Engine là một cơ sở hạ tầng được lưu trữ (SaaS), đóng vai trò trung gian giữa máy khách và máy chủ của bạn, cung cấp bộ nhớ đệm, báo cáo hiệu suất, đo tải, theo dõi lỗi, thống kê sử dụng trường lược đồ, số liệu thống kê lịch sử và nhiều ưu điểm khác. Nó hiện đang miễn phí tới 1 triệu yêu cầu mỗi tháng và nó là phần duy nhất của Apollo mà không phải là nguồn mở và miễn phí. Nó cung cấp kinh phí cho phần nguồn mở của dự án.

Điều đáng lưu ý là ba công cụ đó không được liên kết với nhau theo bất kỳ cách nào và bạn chỉ có thể sử dụng Apollo Client để giao tiếp với API phần 3 hoặc phục vụ API bằng Apollo Server mà không cần có máy khách.

Một số lợi ích của việc sử dụng Apollo

Tất cả đều tương thích với đặc điểm kỹ thuật tiêu chuẩn của GraphQL, do đó không có công nghệ độc quyền hoặc không tương thích trong Apollo.

Nhưng nó rất thuận tiện khi có tất cả các công cụ đó dưới một mái nhà như một bộ hoàn chỉnh cho tất cả các nhu cầu liên quan đến GraphQL của bạn.

Apollo cố gắng để dễ sử dụng và dễ dàng đóng góp.

Apollo Client và Apollo Server đều là các dự án cộng đồng, được xây dựng bởi cộng đồng, vì cộng đồng. Apollo được hỗ trợ bởi Nhóm phát triển sao băng (công ty đứng sau Meteor), một khung JavaScript rất phổ biến.

Apollo tập trung vào việc giữ cho mọi thứ đơn giản. Đây là một cái gì đó quan trọng cho sự thành công của một công nghệ muốn trở nên phổ biến. Phần lớn các công nghệ hoặc khung hoặc thư viện ngoài kia có thể là quá mức cần thiết cho 99% các công ty vừa hoặc nhỏ, và thực sự phù hợp với các công ty lớn có nhu cầu rất phức tạp.

Khách hàng Apollo

Apollo Client là ứng dụng khách JavaScript hàng đầu cho GraphQL. Vì nó hướng đến cộng đồng, nên nó được thiết kế để cho phép bạn xây dựng các thành phần UI có giao diện với dữ liệu GraphQL - trong việc hiển thị dữ liệu đó hoặc thực hiện các đột biến khi một số hành động nhất định xảy ra.

Bạn không cần phải thay đổi mọi thứ trong ứng dụng của mình để sử dụng Apollo Client. Bạn có thể bắt đầu chỉ với một lớp nhỏ và một yêu cầu, và mở rộng từ đó.

Trên hết, Apollo Client được xây dựng đơn giản, nhỏ gọn và linh hoạt từ đầu.

Trong bài viết này, tôi sẽ trình bày chi tiết về quá trình sử dụng Máy khách Apollo trong ứng dụng React.

Tôi sẽ sử dụng API Graphit GitHub làm máy chủ.

Bắt đầu một ứng dụng React

Tôi sử dụng ứng dụng tạo phản ứng để thiết lập ứng dụng React, rất tiện lợi và chỉ cần bổ sung những gì chúng ta cần:

ứng dụng tạo ứng dụng npx myapp
npx là một lệnh có sẵn trong các phiên bản npm mới nhất. Cập nhật npm nếu bạn không có lệnh này.

Bắt đầu ứng dụng máy chủ cục bộ với

bắt đầu sợi

Mở src / index.js:

nhập React từ 'Reac'
nhập ReactDOM từ 'Reac-dom'
nhập './index.css'
nhập ứng dụng từ './App'
đăng ký nhậpServiceWorker từ './registerServiceWorker'

ReactDOM.render (<Ứng dụng />, document.getEuityById ('root'))
đăng kýServiceWorker ()

và loại bỏ tất cả nội dung này.

Bắt đầu với Apollo Boost

Apollo Boost là cách dễ nhất để bắt đầu sử dụng Apollo Client trong một dự án mới. Chúng tôi sẽ cài đặt nó ngoài phản ứng-apollo và graphql.

Trong bảng điều khiển, chạy

sợi thêm biểu đồ apol-boost Reac-apollo

hoặc với npm:

npm cài đặt apollo-boost Reac-apollo graphql --save

Tạo một đối tượng ApolloClient

Bạn bắt đầu bằng cách nhập ApolloClient từ ứng dụng khách aphol trong index.js:

nhập {ApolloClient} từ 'apollo-client'

const client = new ApolloClient ()

Theo mặc định, Máy khách Apollo sử dụng điểm cuối / graphql trên máy chủ hiện tại, do đó, hãy sử dụng Liên kết Apollo để chỉ định chi tiết kết nối với máy chủ GraphQL bằng cách đặt URI điểm cuối GraphQL.

Liên kết Apollo

Một liên kết Apollo được đại diện bởi một đối tượng httpLink, mà chúng ta nhập từ apollo-link-http.

Apollo Link cung cấp cho chúng tôi một cách để mô tả cách chúng tôi muốn nhận kết quả của hoạt động GraphQL và những gì chúng tôi muốn làm với phản hồi.

Nói tóm lại, bạn tạo nhiều phiên bản Apollo Link, tất cả đều hoạt động theo yêu cầu GraphQL lần lượt, cung cấp kết quả cuối cùng mà bạn muốn. Một số Liên kết có thể cung cấp cho bạn tùy chọn thử lại yêu cầu nếu không thành công, theo đợt và nhiều hơn nữa.

Chúng tôi sẽ thêm Liên kết Apollo vào phiên bản Máy khách Apollo của chúng tôi để sử dụng URI điểm cuối GitHub GraphQL URI https://api.github.com/graphql

nhập {ApolloClient} từ 'apollo-client'
nhập {httpLink} từ 'apollo-link-http'

const client = ApolloClient mới ({
  liên kết: httpLink mới ({uri: 'https://api.github.com/graphql'})
})

Bộ nhớ đệm

Chúng tôi chưa hoàn thành. Trước khi có một ví dụ hoạt động, chúng ta cũng phải cho ApolloClient biết nên sử dụng chiến lược bộ đệm nào: InMemoryCache là mặc định và nó là một chiến lược tốt để bắt đầu.

nhập {ApolloClient} từ 'apollo-client'
nhập {httpLink} từ 'apollo-link-http'
nhập {InMemoryCache} từ 'apollo-cache-inmemory'

const client = ApolloClient mới ({
  liên kết: httpLink mới ({uri: 'https://api.github.com/graphql'}),
  bộ đệm: InMemoryCache mới ()
})

Sử dụng ApolloProvider

Bây giờ chúng tôi cần kết nối Máy khách Apollo với cây thành phần của chúng tôi. Chúng tôi làm như vậy bằng cách sử dụng ApolloProvider, bằng cách gói thành phần ứng dụng của chúng tôi vào tệp React chính:

nhập React từ 'Reac'
nhập ReactDOM từ 'Reac-dom'
nhập {ApolloClient} từ 'apollo-client'
nhập {httpLink} từ 'apollo-link-http'
nhập {InMemoryCache} từ 'apollo-cache-inmemory'
nhập {ApolloProvider} từ 'Reac-apollo'

nhập ứng dụng từ './App'

const client = ApolloClient mới ({
  liên kết: httpLink mới ({uri: 'https://api.github.com/graphql'}),
  bộ đệm: InMemoryCache mới ()
})

ReactDOM.render (
  
    <Ứng dụng />
  ,
  document.getEuityById ('root')
)

Điều này là đủ để hiển thị màn hình ứng dụng tạo phản ứng mặc định, với Apollo Client được khởi tạo:

Thẻ mẫu gql

Hiện tại, chúng tôi đã sẵn sàng làm điều gì đó với Apollo Client và chúng tôi sẽ lấy một số dữ liệu từ API GitHub và kết xuất nó.

Để làm như vậy, chúng ta cần nhập thẻ mẫu gql:

nhập gql từ 'graphql-tag'

Bất kỳ truy vấn GraphQL nào cũng sẽ được xây dựng bằng thẻ mẫu này, như thế này:

const truy vấn = gql`
  truy vấn {
    ...
  }
`

Thực hiện một yêu cầu GraphQL

gql là mục cuối cùng chúng ta cần trong bộ công cụ của chúng tôi.

Hiện tại, chúng tôi đã sẵn sàng làm điều gì đó với Apollo Client và chúng tôi sẽ lấy một số dữ liệu từ API GitHub và kết xuất nó.

Nhận mã thông báo truy cập cho API

Điều đầu tiên cần làm là lấy mã thông báo truy cập cá nhân từ GitHub.

GitHub làm cho nó dễ dàng bằng cách cung cấp một giao diện mà bạn chọn bất kỳ quyền nào bạn có thể cần:

Vì lợi ích của hướng dẫn ví dụ này, bạn không cần bất kỳ quyền nào trong số đó. Chúng có nghĩa là để truy cập vào dữ liệu người dùng riêng tư, nhưng chúng tôi sẽ chỉ truy vấn dữ liệu kho lưu trữ công cộng.

Mã thông báo bạn nhận được là mã thông báo OAuth 2.0 Bearer.

Bạn có thể dễ dàng kiểm tra nó bằng cách chạy từ dòng lệnh:

$ curl -H "Ủy quyền: người mang *** _ YOU_TOKEN_HERE _ ***" -X POST -d "\
 {\
   \ "truy vấn \": \ "truy vấn {người xem {đăng nhập}} \" \
 } \
"https://api.github.com/graphql

cái nào sẽ cho bạn kết quả

{"dữ liệu": {"người xem": {"đăng nhập": "*** _ Your_LOGIN_NAME _ ***"}}}

hoặc là

{
  "tin nhắn": "Thông tin xấu",
  "Tài liệu_url": "https://developer.github.com/v4"
}

nếu có sự cố xảy ra

Sử dụng Liên kết Apollo để xác thực

Vì vậy, chúng tôi cần gửi tiêu đề Ủy quyền cùng với yêu cầu GraphQL của chúng tôi, giống như chúng tôi đã làm trong yêu cầu cuộn tròn ở trên.

Chúng tôi có thể làm điều này với Apollo Client bằng cách tạo một phần mềm trung gian Apollo Link. Bắt đầu với việc cài đặt bối cảnh liên kết:

npm cài đặt bối cảnh liên kết

Gói này cho phép chúng tôi thêm một cơ chế xác thực bằng cách đặt bối cảnh của các yêu cầu của chúng tôi.

Chúng ta có thể sử dụng nó trong mã này bằng cách tham chiếu hàm setContext theo cách này:

const authLink = setContext ((_, {tiêu đề}) => {
  const token = '*** YOU_TOKEN **'

  trở về {
    tiêu đề: {
      ... tiêu đề,
      ủy quyền: `Bearer $ {token}`
    }
  }
})

và một khi chúng ta có Apollo Link mới này, chúng ta có thể kết hợp nó với httpLink mà chúng ta đã có bằng cách sử dụng phương thức concat () trên một liên kết:

const link = authLink.concat (httpLink)

Đây là mã đầy đủ cho tệp src / index.js với mã chúng tôi có ngay bây giờ:

nhập React từ 'Reac'
nhập ReactDOM từ 'Reac-dom'
nhập {ApolloClient} từ 'apollo-client'
nhập {httpLink} từ 'apollo-link-http'
nhập {InMemoryCache} từ 'apollo-cache-inmemory'
nhập {ApolloProvider} từ 'Reac-apollo'
nhập {setContext} từ 'bối cảnh liên kết'
nhập gql từ 'graphql-tag'

nhập ứng dụng từ './App'

const httpLink = httpLink mới ({uri: 'https://api.github.com/graphql'})

const authLink = setContext ((_, {tiêu đề}) => {
  const token = '*** YOU_TOKEN **'

  trở về {
    tiêu đề: {
      ... tiêu đề,
      ủy quyền: `Bearer $ {token}`
    }
  }
})

const link = authLink.concat (httpLink)

const client = ApolloClient mới ({
  liên kết: liên kết,
  bộ đệm: InMemoryCache mới ()
})

ReactDOM.render (
  
    <Ứng dụng />
  ,
  document.getEuityById ('root')
)
CẢNH BÁO Hãy nhớ rằng mã này là một ví dụ cho mục đích giáo dục. Nó hiển thị API Graphit GitHub của bạn cho mọi người thấy trong mã mặt trước của bạn. Mã sản xuất cần giữ mã thông báo này ở chế độ riêng tư.

Bây giờ chúng tôi có thể thực hiện yêu cầu GraphQL đầu tiên ở dưới cùng của tệp này và truy vấn mẫu này yêu cầu tên và chủ sở hữu của 10 kho lưu trữ phổ biến nhất với hơn 50 nghìn sao:

const POPULAR_REPOSITORIES_LIST = gql`
{
  tìm kiếm (truy vấn: "sao:> 50000", loại: REPOSITORY, đầu tiên: 10) {
    kho lưu trữ
    cạnh {
      nút {
        ... trên Kho lưu trữ {
          Tên
          chủ nhân {
            đăng nhập
          }
          stargazers {
            tổng số tiền
          }
        }
      }
    }
  }
}
`

client.query ({truy vấn: POPULAR_REPOSITORIES_LIST}). sau đó (console.log)

Chạy mã này thành công trả về kết quả truy vấn của chúng tôi trong bảng điều khiển trình duyệt:

Kết xuất kết quả truy vấn GraphQL được đặt trong một thành phần

Những gì chúng tôi đã thấy cho đến nay là mát mẻ. Những gì thậm chí mát hơn là sử dụng bộ kết quả GraphQL để hiển thị các thành phần của bạn.

Chúng tôi để Apollo Client có gánh nặng (hoặc niềm vui) hoặc tìm nạp dữ liệu và xử lý tất cả các công cụ cấp thấp. Điều này cho phép chúng tôi tập trung vào việc hiển thị dữ liệu bằng cách sử dụng bộ tăng cường thành phần graphql được cung cấp bởi Reac-apollo:

nhập React từ 'Reac'
nhập {graphql} từ 'Reac-apollo'
nhập {gql} từ 'apollo-boost'

const POPULAR_REPOSITORIES_LIST = gql`
{
  tìm kiếm (truy vấn: "sao:> 50000", loại: REPOSITORY, đầu tiên: 10) {
    kho lưu trữ
    cạnh {
      nút {
        ... trên Kho lưu trữ {
          Tên
          chủ nhân {
            đăng nhập
          }
          stargazers {
            tổng số
          }
        }
      }
    }
  }
}
`

const App = graphql (POPULAR_REPOSITORIES_LIST) (đạo cụ =>
  
        {props.data.loading? '': props.data.search.edges.map ((hàng, i) =>       
  •         {row.node.owner.login} / {row.node.name}: {''}                    {row.node.stargazers.totalCount}                     )}    ) xuất ứng dụng mặc định

Đây là kết quả của truy vấn của chúng tôi được hiển thị trong thành phần

Máy chủ Apollo

Một máy chủ GraphQL có nhiệm vụ chấp nhận các yêu cầu đến trên một điểm cuối, giải thích yêu cầu và tìm kiếm bất kỳ dữ liệu nào cần thiết để đáp ứng nhu cầu của khách hàng.

Có hàng tấn triển khai máy chủ GraphQL khác nhau cho mọi ngôn ngữ có thể.

Apollo Server là một triển khai máy chủ GraphQL cho JavaScript, đặc biệt là nền tảng Node.js.

Nó hỗ trợ nhiều khung công tác Node.js phổ biến, bao gồm:

  • bày tỏ
  • Hapi
  • Koa
  • Phục hồi

Máy chủ Apollo về cơ bản mang đến cho chúng ta ba điều:

  • Một cách để mô tả dữ liệu của chúng tôi với một lược đồ.
  • Khung cho các trình phân giải, là các hàm chúng ta viết để lấy dữ liệu cần thiết để thực hiện một yêu cầu.
  • Nó tạo điều kiện xử lý xác thực cho API của chúng tôi.

Vì mục đích tìm hiểu những điều cơ bản của Máy chủ Apollo, chúng tôi sẽ không sử dụng bất kỳ khung công tác Node.js nào được hỗ trợ. Thay vào đó, chúng tôi sẽ sử dụng thứ được xây dựng bởi nhóm Apollo, một thứ thực sự tuyệt vời sẽ là nền tảng cho việc học của chúng tôi: Launchpad.

Bệ phóng

Launchpad là một dự án là một phần của sản phẩm Apollo, và nó là một công cụ khá tuyệt vời cho phép chúng ta viết mã trên đám mây và tạo một Máy chủ Apollo trực tuyến, giống như chúng ta chạy một đoạn mã trên Codepen, JSFiddle hoặc JSBin.

Ngoại trừ việc thay vì xây dựng một công cụ trực quan mà mà cô sẽ bị cô lập ở đó, và có nghĩa chỉ là một công cụ giới thiệu hoặc như một công cụ học tập, với Launchpad, chúng tôi tạo ra một API GraphQL. Nó sẽ được truy cập công khai.

Mọi dự án trên Launchpad đều được gọi là pad và có URL điểm cuối GraphQL, như:

https://1jzxrj129.lp.gql.zone/graphql

Khi bạn tạo một bảng đệm, Launchpad cung cấp cho bạn tùy chọn tải xuống toàn bộ mã của ứng dụng Node.js mà chạy khi chạy nó và bạn chỉ cần chạy cài đặt npm và bắt đầu có một bản sao cục bộ của Máy chủ Apollo GraphQL.

Tóm lại, nó là một công cụ tuyệt vời để tìm hiểu, chia sẻ và nguyên mẫu.

Máy chủ Apollo Xin chào thế giới

Mỗi khi bạn tạo một bảng Launchpad mới, bạn sẽ được giới thiệu với Hello, World! của máy chủ Apollo. Hãy để Lặn lặn vào đó.

Trước tiên, bạn nhập hàm makeExecutableSchema từ các công cụ graphql.

nhập {makeExecutableSchema} từ 'graphql-tools'

Hàm này được sử dụng để tạo một đối tượng GraphQLSchema, bằng cách cung cấp cho nó một định nghĩa lược đồ (được viết bằng ngôn ngữ lược đồ GraphQL) và một bộ các bộ phân giải.

Một định nghĩa lược đồ là một chuỗi ký tự mẫu có chứa mô tả truy vấn của chúng tôi và các loại được liên kết với từng trường:

const typeDefs = `
  loại Truy vấn {
    xin chào: Chuỗi
  }
`

Trình phân giải là một đối tượng ánh xạ các trường trong lược đồ thành các hàm phân giải. Nó có thể tra cứu dữ liệu để trả lời một truy vấn.

Dưới đây là một trình phân giải đơn giản chứa hàm trình phân giải cho trường hello, đơn giản là trả về thế giới Hello! chuỗi:

const constvers = {
  Truy vấn: {
    xin chào: (root, args, bối cảnh) => {
      trở lại 'Xin chào thế giới!'
    }
  }
}

Với hai phần tử đó, định nghĩa lược đồ và trình phân giải, chúng tôi sử dụng hàm makeExecutableSchema mà chúng tôi đã nhập trước đây để có được một đối tượng GraphQLSchema, mà chúng ta gán cho const lược đồ.

export const giản đồ = makeExecutableSchema ({typeDefs, bộ giải quyết})

Đây là tất cả những gì bạn cần để phục vụ API chỉ đọc đơn giản. Launchpad chăm sóc các chi tiết nhỏ.

Dưới đây là mã đầy đủ cho ví dụ Hello World đơn giản:

nhập {makeExecutableSchema} từ 'graphql-tools'

const typeDefs = `
  loại Truy vấn {
    xin chào: Chuỗi
  }
`

const constvers = {
  Truy vấn: {
    xin chào: (root, args, bối cảnh) => {
      trở lại 'Xin chào thế giới!'
    }
  }
}

export const giản đồ = makeExecutableSchema ({
  loạiDefs,
  người giải quyết
})

Launchpad cung cấp một công cụ tích hợp tuyệt vời để sử dụng API:

Và như tôi đã nói trước đây, API có thể truy cập công khai, do đó bạn chỉ cần đăng nhập và lưu phần đệm của mình.

Tôi đã tạo một pad hiển thị điểm cuối của nó tại https://kqwwkp0pr7.lp.gql.zone/graphql, vì vậy, hãy để thử dùng nó bằng cách sử dụng curl từ dòng lệnh:

$ cuộn tròn \
  -X BÀI \
  -H "Loại nội dung: ứng dụng / json" \
  --data '{"truy vấn": "{xin chào" "}' \
  https://kqwwkp0pr7.lp.gql.zone/graphql

mà thành công cho chúng ta kết quả mà chúng ta mong đợi:

{
  "dữ liệu": {
    "xin chào": "Xin chào thế giới!"
  }
}

Chạy máy chủ GraphQL cục bộ

Chúng tôi đã đề cập rằng mọi thứ bạn tạo trên Launchpad đều có thể tải xuống được, vì vậy hãy để Lôi tiếp tục.

Gói này bao gồm hai tập tin. Đầu tiên, lược đồ là những gì chúng ta có ở trên.

Thứ hai, server.js, là vô hình trong Launchpad và đó là thứ cung cấp chức năng Apollo Server cơ bản, được cung cấp bởi Express, khung công tác Node.js phổ biến.

Đây không phải là ví dụ đơn giản nhất về thiết lập Máy chủ Apollo, vì vậy để giải thích, tôi sẽ thay thế nó bằng một ví dụ đơn giản hơn (nhưng hãy thoải mái nghiên cứu rằng sau khi bạn hiểu được những điều cơ bản).

Mã máy chủ Apollo đầu tiên của bạn

Đầu tiên, chạy cài đặt npm và bắt đầu npm trên mã Launchpad bạn đã tải xuống.

Máy chủ nút mà chúng tôi đã khởi tạo sử dụng gật đầu để khởi động lại máy chủ khi tệp thay đổi, vì vậy khi bạn thay đổi mã, máy chủ sẽ được khởi động lại với các thay đổi được áp dụng.

Thêm mã này trong server.js:

const express = Yêu cầu ('express')
const bodyParser = Yêu cầu ('trình phân tích cú pháp cơ thể')
const {graphqlExpress} = Yêu cầu ('apollo-server-express')
const {lược đồ} = Yêu cầu ('./ lược đồ')

máy chủ const = express ()

server.use ('/ graphql', bodyParser.json (), graphqlExpress ({giản đồ}))

máy chủ.listen (3000, () => {
  console.log ('Nghe GraphQL tại http: // localhost: 3000 / graphql')
})

Chỉ với 11 dòng, điều này đơn giản hơn nhiều so với máy chủ do Launchpad thiết lập, bởi vì chúng tôi đã loại bỏ tất cả những điều làm cho mã đó linh hoạt hơn cho nhu cầu của họ.

Mã hóa buộc bạn phải đưa ra quyết định khó khăn: bây giờ bạn cần bao nhiêu sự linh hoạt? Làm thế nào quan trọng là có mã sạch, dễ hiểu mà bạn có thể nhận sáu tháng kể từ bây giờ và dễ dàng chỉnh sửa, hoặc chuyển cho các nhà phát triển và thành viên khác trong nhóm để họ có thể làm việc hiệu quả trong ít thời gian khi cần thiết?

Đây là những gì mã làm:

Trước tiên chúng tôi nhập một vài thư viện mà chúng tôi sẽ sử dụng.

  • Express sẽ cung cấp năng lượng cho chức năng mạng cơ bản để hiển thị điểm cuối
  • bodyParser là phần mềm trung gian phân tích cú pháp cơ thể Node
  • graphqlExpress là đối tượng máy chủ Apollo cho Express
const express = Yêu cầu ('express')
const bodyParser = Yêu cầu ('trình phân tích cú pháp cơ thể')
const {graphqlExpress} = Yêu cầu ('apollo-server-express')

Tiếp theo, chúng ta nhập đối tượng GraphQLSchema mà chúng ta đã tạo trong tệp lược đồ.js ở trên dưới dạng Schema:

const {lược đồ} = Yêu cầu ('./ lược đồ')

Đây là một số bộ Express tiêu chuẩn và chúng tôi chỉ khởi tạo một máy chủ trên cổng 3000

máy chủ const = express ()

Bây giờ chúng tôi đã sẵn sàng để khởi tạo Máy chủ Apollo:

graphqlExpress ({giản đồ})

và chúng tôi chuyển nó dưới dạng gọi lại đến điểm cuối của chúng tôi cho các yêu cầu JSON của HTTP:

server.use ('/ graphql', bodyParser.json (), graphqlExpress ({giản đồ}))

Tất cả những gì chúng ta cần bây giờ là bắt đầu Express:

máy chủ.listen (3000, () => {
  console.log ('Nghe GraphQL tại http: // localhost: 3000 / graphql')
})

Thêm một điểm cuối GraphiQL

Nếu bạn sử dụng GraphiQL, bạn có thể dễ dàng thêm điểm cuối / graphiql, để sử dụng với IDE trên trình duyệt tương tác GraphiQL:

server.use ('/ graphiql', graphiqlExpress ({
  endpointURL: '/ graphql',
  truy vấn: ``
}))

Bây giờ chúng ta chỉ cần khởi động máy chủ Express:

máy chủ.listen (PORT, () => {
  console.log ('Nghe GraphQL tại http: // localhost: 3000 / graphql')
  console.log ('Nghe đồ thị tại http: // localhost: 3000 / graphiql')
})

Bạn có thể kiểm tra nó bằng cách sử dụng lại curl:

$ cuộn tròn \
  -X BÀI \
  -H "Loại nội dung: ứng dụng / json" \
  --data '{"truy vấn": "{xin chào" "}' \
  http: // localhost: 3000 / graphql

Điều này sẽ cho bạn kết quả tương tự như trên, nơi bạn đã gọi các máy chủ Launchpad:

{
  "dữ liệu": {
    "xin chào": "Xin chào thế giới!"
  }
}
Quan tâm đến việc học JavaScript? Nhận ebook miễn phí của tôi tại jshandbook.com