GraphQL

Gatsby是一個使用React構建應用程序和網站的平台。 它是一個允許你使用一系列技術和實踐來構建的工具，這些技術和實踐被統稱為JAMstack。 Gatsby是當前前端開發領域中最火熱的工具之一。為什麼呢？我認為有以下幾個原因： “JAMstack"方法用於構建Web應用程序和網站的大幅增長 行業中對於"Progressive Web Apps”（漸進式Web應用程序）技術的快速采用，這也是Gatsby的關鍵功能之一 它是使用React和GraphQL構建的，這兩個技術非常流行和備受追捧 它功能強大 它的速度很快 文檔很好 網絡效應（有人使用它，創建站點，製作教程，更多人了解它，形成一種循環） 一切都是JavaScript（不需要學習新的模板語言） 它隱藏了複雜性，但允許我們逐步定制每一步 以上都是很好的優點，Gatsby絕對值得一試。 它是如何工作的？ 使用Gatsby，您可以使用React組件來構建應用程序。 您通常會使用Markdown編寫在站點中呈現的內容，但您也可以使用任何類型的數據源，例如無頭CMS或像Contentful這樣的Web服務。 Gatsby會構建站點，並將其編譯為靜態HTML，可以部署在任何Web服務器上，例如Netlify、AWS S3、GitHub Pages、常規託管提供商、PAAS等。您只需要找一個可以提供普通HTTP頁面和內容給客戶端的地方。 我在上面的列表中提到了漸進式Web應用程序。Gatsby會自動將您的站點生成為PWA，並使用服務工作器加快頁面加載和資源緩存。 您可以通過插件來增加Gatsby的功能。 安裝 您可以在終端中運行以下命令安裝Gatsby： npm install -g gatsby-cli 這將安裝gatsby命令行工具。 （當有新版本時，可以使用相同的命令進行更新） 您可以運行以下命令創建一個新的"Hello World"站點： gatsby new mysite https://github.com/gatsbyjs/gatsby-starter-hello-world 此命令將在mysite文件夾中創建一個全新的Gatsby站點，使用位於https://github.com/gatsbyjs/gatsby-starter-hello-world的starter。 Starter是您可以基於的示例站點。另一個常見的starter是default，可在https://github.com/gatsbyjs/gatsby-starter-default上找到。 您可以在這裡找到所有可用的starter的列表 運行Gatsby站點 在終端完成安裝starter之後，可以運行以下命令來運行網站： cd mysite gatsby develop 這將在本地主機的8000端口上啟動一個新的Web服務器並提供網站。 以下是我們的Hello World starter的運作示例： 檢查站點 如果用您喜歡的代碼編輯器（我使用VS Code）打開您創建的站點，您會發現有3個文件夾： .cache：一個包含Gatsby內部代碼的隱藏文件夾，您在現在不需要更改其中的任何內容 public：在構建站點後包含生成網站的靜態文件 src：包含React組件的文件夾，這裡只有index組件 static：將包含靜態資源，例如CSS和圖片 現在，對默認頁面進行簡單的更改非常容易，只需打開src/pages/index.js文件，將“Hello World！”更改為其他內容，然後保存。網頁應立即熱重載該組件（這意味著網頁實際上不會刷新，但內容會更改 - 這是由底層技術支持的一個技巧）。 要添加第二個頁面，只需在此文件夾中創建另一個.js文件，與index.js具有相同的內容（調整内容）並保存。 例如，我創建了一個名為second.js的文件，具有以下內容： import React from 'react' export default () => <div>Second page!...

主要介紹了REST與GraphQL之間的差異以及在什麼情況下使用其中之一。 由於REST是建立API的一種常用方法，比GraphQL更為廣泛使用，所以可以假設你對其相當熟悉，現在讓我們看看GraphQL和REST之間的差異。 REST是一種概念 REST是一種事實上的架構標準，但沒有具體的規範，有許多非官方定義。而GraphQL有一個規範草案，它是一個查詢語言，而不是一種架構，其周圍建立了一套明確的工具集（和一個蓬勃發展的生態系統）。 REST是建立在現有架構之上的，最常見的情況是使用HTTP。而GraphQL則正在構建自己的一套約定，這既可以是優點，也可能不是優點。因為REST可以通過HTTP層的緩存功能免費獲益。 單一端點 GraphQL只有一個端點，您將所有的查詢都發送到該端點。而REST則使用多個端點，並使用HTTP 動詞來區分讀取操作（GET）和寫入操作（POST，PUT，DELETE）。GraphQL不使用HTTP動詞來確定請求類型。 根據需求量身定制 在REST中，您通常無法選擇服務器返回的數據，除非服務器實現了使用稀疏字段集進行部分響應的功能，並且客戶端使用該功能。API維護者無法強制執行此類過濾。 除非您也控制API服務器並為每個不同的請求定制響應，否則API通常會返回比您所需的更多信息。 在GraphQL中，您明確要求您所需的信息，您不會“選擇退出”完整的默認響應，而需要選擇您想要的字段。 這有助於節省服務器的資源，因為您可能需要更少的處理，同時也節省了網絡流量，因為要傳輸的有效載荷更小。 一個很好的例子來形象地展示這一點是一個Pizza端點的示例（我是義大利人，一個披薩的例子很完美）。 如果你調用GET /pizza/margherita，你會得到一個馬若里披薩。 如果你調用GET /pizza/napoli，你會得到一個拿坡里披薩。 如果你有30個不同的口味，你將有30個端點（除非你把披薩名稱作為參數傳遞給GET /pizza，例如）。 但也許你想要一種特定的披薩，但卻不要一種你不喜歡的成分。向服務生提出這個要求很容易，但對於REST端點來說有點困難。 一個GraphQL端點將讓你調用/pizza，然後你可以要求特定的成分，來打造你想要的完美披薩。 GraphQL使得監測字段使用變得容易 在REST中通常無法確定客戶端是否需要某個字段，因此在進行重構或淘汰時，無法確定實際使用情況。 GraphQL使得追踪客戶端使用的字段成為可能。 訪問嵌套數據資源 GraphQL允許進行更少的網絡調用。 來看一個例子：您需要訪問一個人的朋友的名字。如果您的REST API公開了一個/person端點，該端點返回一個包含朋友ID列表的人物對象，通常可以先通過GET /person/1獲取人物信息，其中包含朋友的ID列表。 除非該人的朋友列表已經包含有朋友的名字，否則對於有100個朋友的情況，您需要對/person端點發起101個HTTP請求，這是一個巨大的時間成本，也是一個資源密集型操作。 而GraphQL只需要一個請求，該請求要求查詢該人物的朋友的名字。 類型 REST API基於無法提供類型控制的JSON。GraphQL具有一個類型系統。 哪一個更好？ 全球各地的組織都在質疑他們的API技術選擇，他們正試圖找出從REST遷移到GraphQL是否適合他們的需求。 當您需要公開複雜的數據表示且客戶端可能只需要數據的子集，或者他們定期執行嵌套查詢以獲取所需的數據時，GraphQL非常適合。 和編程語言一樣，沒有絕對的贏家，一切都取決於您的需求。 同時，我還想說一點：您可以同時使用兩種方法。 您可以根據您的需求混合使用REST和GraphQL，有時這是最好的方法。

Next.js或Gatsby？為什麼要選擇它們而不是create-react-app？而你又應該選擇哪一個呢？ create-react-app無法輕鬆地幫助您生成伺服器端渲染的應用程式。它所提供的一切（包括SEO、速度等等），只能由像Next.js和Gatsby這樣的工具提供。 Next.js比Gatsby更適合的時機是什麼？ 它們都可以幫助實現伺服器端渲染，但方式不同。 使用Gatsby的結果是一個靜態網站生成器，沒有伺服器。您可以構建網站，然後將構建過程的結果靜態地部署在Netlify或其他靜態主機網站上。 Next.js提供了一個後端，可以根據請求生成伺服器端渲染的響應，讓您可以創建動態網站，這意味著您將在可以執行Node.js的平台上部署它。 Next.js也可以生成靜態網站，但我不認為這是它的主要用例。 如果我的目標是構建一個靜態網站，我可能很難選擇，也許Gatsby擁有更好的插件生態系統，包括許多特定於博客的插件。 Gatsby還高度依賴於GraphQL，您可能會根據自己的觀點和需求喜歡或不喜歡這一點。

這是一個關於如何使用Node.js和Express創建GraphQL服務器的簡單教程。 首先，創建一個新的Node.js項目，如果您還沒有設置一個的話： npm init --y 這個命令會創建我們使用npm所需的package.json文件。 安裝npm包express，graphql和express-graphql： npm install express graphql express-graphql 創建一個app.js文件，並開始初始化Express服務器： const express = require('express') const app = express() app.listen(3000, () => { console.log('App listening on port 3000') }) 現在我們添加express-graphql庫，它是一個中間件(middleware)，我們將它應用於/graphql路由： const express = require('express') const graphqlHTTP = require('express-graphql') const app = express() app.use('/graphql', graphqlHTTP()) app.listen(3000, () => { console.log('App listening on port 3000') }) 我們需要傳遞一個對象，該對象包含了 schema 屬性，該屬性必須包含一個schema定義。 我們首先需要定義一個schema！ 創建一個schema.js文件，然後在其中引入graphql庫，使用對象解構語法，我們獲取GraphQLSchema，GraphQLObjectType和GraphQLString這幾個對象： const graphql = require('graphql') const { GraphQLSchema, GraphQLObjectType, GraphQLString } = graphql 然後，我們通過初始化一個新的GraphQLSchema實例，並傳遞一個對象給它，該對象包含一個query屬性。該屬性是一個GraphQLObjectType對象的實例：...

有許多在線工具可以幫助您 lint 或格式化程式碼。本文列出了一些對 HTML、CSS 和 JavaScript 最有用的工具。 改進您的JavaScript程式碼的流行專案的官方在線版本 Prettier（格式化程式碼） https://prettier.io/playground/ ESLint（程式碼檢查工具） https://eslint.org/demo JSHint （程式碼檢查工具） http://jshint.com/ 其他語言的工具 CSS http://www.codebeautifier.com/ HTML http://htmlformatter.com/ JSON https://jsonformatter.curiousconcept.com/ https://jsonformatter.org/ GraphQL http://toolbox.sangria-graphql.org/format 通用工具（能處理不止一種語法） https://ctrlq.org/beautifier/