{"id":48155,"date":"2023-09-21T17:12:58","date_gmt":"2023-12-27T14:06:36","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bb%8egatsby-js%ef%bc%88next-js%ef%bc%89%e7%9a%84%e4%b8%bb%e9%a2%98%e5%88%b6%e4%bd%9c%e4%b8%ad%e5%ad%a6%e4%b9%a0%e3%80%90react-js-x-graphql%e3%80%91%e5%9c%a8%e5%8d%9a%e5%ae%a2%e7%b3%bb\/"},"modified":"2024-05-04T00:55:56","modified_gmt":"2024-05-03T16:55:56","slug":"%e4%bb%8egatsby-js%ef%bc%88next-js%ef%bc%89%e7%9a%84%e4%b8%bb%e9%a2%98%e5%88%b6%e4%bd%9c%e4%b8%ad%e5%ad%a6%e4%b9%a0%e3%80%90react-js-x-graphql%e3%80%91%e5%9c%a8%e5%8d%9a%e5%ae%a2%e7%b3%bb","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bb%8egatsby-js%ef%bc%88next-js%ef%bc%89%e7%9a%84%e4%b8%bb%e9%a2%98%e5%88%b6%e4%bd%9c%e4%b8%ad%e5%ad%a6%e4%b9%a0%e3%80%90react-js-x-graphql%e3%80%91%e5%9c%a8%e5%8d%9a%e5%ae%a2%e7%b3%bb\/","title":{"rendered":"\u4eceGatsby.js\uff08Next.js\uff09\u7684\u4e3b\u9898\u5236\u4f5c\u4e2d\u5b66\u4e60\u3010React.js \u00d7 GraphQL\u3011\u5728\u535a\u5ba2\u7cfb\u7edf\u4e2d\u83b7\u53d6\u53d1\u5e03\u6587\u7ae0\u4fe1\u606f\u7684\u65b9\u6cd5"},"content":{"rendered":"

\u524d\u4e00\u7bc7\u6587\u7ae0\uff1a\u3010GraphQL\u5165\u95e8\u3011\u5b66\u4e60\u7b14\u8bb0\uff0c\u5b9e\u73b0\u5728 Next.js \u5236\u4f5c\u7684\u535a\u5ba2\u4e2d\u83b7\u53d6\u6587\u7ae0\u4fe1\u606f\u7684API\u3002<\/p><\/blockquote>\n

\u6700\u8fd1\u4e3a\u4e86\u8bd5\u8fd0\u884cGraphQL\uff0c\u6211\u5236\u4f5c\u4e86\u4e00\u4e2a\u7b80\u6613\u5e94\u7528\u7a0b\u5e8f\u5e76\u4e14\u80fd\u7406\u89e3\u5176\u8fd0\u884c\u65b9\u5f0f\u3002\u4e0d\u8fc7\uff0c\u6211\u76ee\u524d\u8fd8\u4e0d\u660e\u767d\u8981\u5982\u4f55\u5b9e\u73b0\u5728next.js\u4e2d\u8fd0\u884c\uff0c\u9700\u8981\u600e\u6837\u7684\u6587\u4ef6\u7ed3\u6784\u548c\u7f16\u7801\u3002<\/p>\n

\u6211\u9700\u8981\u5b66\u4e60\u5982\u4f55\u5c06GraphQL\u6dfb\u52a0\u5230\u5df2\u7ecf\u5f00\u59cb\u5236\u4f5c\u7684Next.js\u5e94\u7528\u4e2d\u3002\u6211\u5c1d\u8bd5\u8fc7\u641c\u7d22\u4e86\u5f88\u591a\uff0c\u4f46\u7531\u4e8e\u6211\u5bf9\u9605\u8bfbJavaScript\u4ee3\u7801\u7684\u80fd\u529b\u4e0d\u8db3\uff0c\u6240\u4ee5\u65e0\u6cd5\u7406\u89e3\u3002\u56e0\u6b64\uff0c\u6211\u6253\u7b97\u901a\u8fc7\u89e3\u5256\u5df2\u7ecf\u5b9e\u73b0\u4e86Next.js\u57fa\u7840\u4e0a\u7684GraphQL\u7684\u5b8c\u6574\u5e94\u7528\u7a0b\u5e8f\u6765\u63a2\u7d22\u5b9e\u73b0\u65b9\u6cd5\u3002\u8fd9\u662f\u4e00\u79cd\u6df1\u5165\u5b66\u4e60\u7684\u65b9\u6cd5\u3002<\/p>\n

\u203b \u672c\u6587\u4e2d\u4ecb\u7ecd\u4e86\u5728\u5bf9Gatsby\u4e3b\u9898\u7684\u64cd\u4f5c\u60c5\u51b5\u6709\u6240\u4e86\u89e3\u540e\u4e2d\u65ad\u5199\u4f5c\u7684\u8fc7\u7a0b\u3002\u73b0\u5728\u51b3\u5b9a\u5148\u5c1d\u8bd5\u4f7f\u7528Next.js\u7684API\u3002<\/p>\n

\u4f53\u9a8c\u5236\u4f5cGatsby\u4e3b\u9898\u4ee5\u5b66\u4e60React \u00d7 GraphQL\u3002<\/h1>\n

\u53c2\u8003\u7684\u4e3b\u9898\u662fgatsby-advanced-starter\uff0c\u8be5\u4e3b\u9898\u4e5f\u5728GatsbyJS\u5b98\u65b9\u7f51\u7ad9\u4e0a\u516c\u5f00\u3002<\/p>\n

\u6309\u7167\u5feb\u901f\u9759\u6001\u7f51\u7ad9\u751f\u6210\u5668GatsbyJs\u7684\u5165\u95e8\u89e3\u91ca\u4f5c\u4e3a\u53c2\u8003\uff0c\u601d\u8003\u4ee3\u7801\u7684\u542b\u4e49\u3002<\/p>\n

\u4e3a\u4e86\u4e86\u89e3GatsbyJS\u9ed8\u8ba4\u8bbe\u7f6e\uff0c\u53ef\u4ee5\u67e5\u9605GatsbyJS\u5b98\u65b9\u6587\u6863\u3002<\/p>\n

\u53c2\u8003\u6587\u732e:
\n– \u4ecb\u7ecdGatsbyJs\u7684\u9ad8\u901f\u9759\u6001\u7f51\u7ad9\u751f\u6210\u5668
\n– GatsbyJS\u5b98\u65b9\u6587\u6863
\n– gatsby-advanced-starter<\/p><\/blockquote>\n

\u9996\u5148\uff0c\u5c06Gatsby\u7f51\u7ad9\u8fd0\u884c\u8d77\u6765\u3002<\/h1>\n

\u53ef\u4ee5\u4f7f\u7528\u4ee5\u4e0b\u547d\u4ee4\u6765\u751f\u6210 Gatsby \u9879\u76ee\u3002rootPath \u662f\u6307\u5b9a\u8981\u751f\u6210\u7684\u76ee\u5f55\uff0c\u5982\u679c\u4e0d\u5b58\u5728\u5219\u4f1a\u65b0\u5efa\u3002starter \u662f\u6307\u5b9a\u7531 Gatsby \u63d0\u4f9b\u7684\u4e3b\u9898\u7684 URL\uff08\u4f8b\u5982 GitHub \u4ed3\u5e93\uff09\u3002<\/p>\n

$ <\/span>gatsby new [<\/span>rootPath] [<\/span>starter]\r\n<\/code><\/pre>\n
\u5982\u679c\u9009\u62e9\u4e86\u8fd9\u4e2a\u4e3b\u9898\uff0c\u90a3\u4e48\u5e94\u8be5\u8fd9\u6837\u505a\u3002<\/p>\n
$ <\/span>gatsby new gatsby-advanced-starter https:\/\/github.com\/Vagr9K\/gatsby-advanced-starter\r\n<\/code><\/pre>\n
\u670d\u52a1\u5668\u542f\u52a8\u3002<\/p>\n
cd <\/span>gatxby-advanced-starter\r\nnpm run develop\r\n<\/code><\/pre>\n
\u5982\u679c\u8fde\u63a5\u5230http:\/\/localhost:8000\/\uff0c\u90a3\u4e48\u8be5\u7f51\u7ad9\u4f1a\u88ab\u663e\u793a\u51fa\u6765\u3002<\/p>\n
\u542f\u52a8\u547d\u4ee4\u53ef\u4ee5\u5728npm\u811a\u672c\u4e2d\u5b9a\u4e49\u3002<\/p>\n
$ <\/span>gatsby develop\r\n<\/code><\/pre>\n
\"scipts\"<\/span>:<\/span> {<\/span>\r\n  \"develop\"<\/span>:<\/span> \"gatsby develop\"<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
\u663e\u793a Gatsby CLI \u7684\u5404\u79cd\u547d\u4ee4\u8be6\u7ec6\u4fe1\u606f\u7684\u547d\u4ee4\u3002<\/p>\n
$ <\/span>npx gatsby -h<\/span>\r\n<\/code><\/pre>\n
The file structure of a Gatsby project.<\/h3>\n
\u867d\u7136\u4e0d\u662f\u5168\u90e8\u90fd\u51c6\u786e\uff0c\u4f46\u6211\u5c1d\u8bd5\u5c06\u9700\u8981\u4e86\u89e3\u6574\u4f53\u6982\u5ff5\u7684\u90e8\u5206\u4ee5\u6811\u72b6\u7ed3\u6784\u8868\u8fbe\u51fa\u6765\u3002\u6bd5\u7adf\uff0c\u5728\u5b66\u4e60Gatsby\u7f16\u7801\u65f6\uff0c\u6211\u4eec\u5e94\u8be5\u5148\u638c\u63e1\u6574\u4f53\u6982\u5ff5\u3002<\/p>\n
- cntents\/\r\n    - 01-01-2019.md\r\n    - 01-02-2019.md\r\n- data\/\r\n    - SiteConfig.js\r\n- node_modules\/\r\n    - \u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u305fnode.js\u30e2\u30b8\u30e5\u30fc\u30eb\r\n- public\/\r\n    - \u751f\u6210\u3055\u308c\u305fhtml\u30d5\u30a1\u30a4\u30eb\u7fa4\r\n- src\/\r\n    - favicon.png\r\n    - components\/\r\n        - Header\/\r\n            - Header.jsx\r\n            - Header.css\r\n        - Footer\/\r\n            - Footer.jsx\r\n            - Footer.css\r\n        - SEO\/\r\n            - SEO.jsx\r\n            - SEO.css\r\n        - SocialLinks\/\r\n            - SocialLinks.jsx\r\n            - SocialLinks.css\r\n        - PostTags\/\r\n            - PostTags.jsx\r\n            - PostTags.css\r\n        - PostListing\/\r\n            - PostListing.jsx\r\n            - PostListing.css\r\n    - templates\/\r\n        - category.jsx\r\n        - listing.jsx\r\n        - listing.css\r\n        - post.jsx\r\n        - post.css\r\n        - tag.jsx\r\n    - pages\/\r\n        - about.jsx\r\n        - contact.jsx\u306a\u3069\r\n- static\/\r\n    - \u9759\u7684\u30d5\u30a1\u30a4\u30eb\uff08img\u3084txt\u306a\u3069\uff09\r\n- gatsby-config.js\r\n- gatsby-node.js\r\n- jsconfig.json\r\n- package.json\r\n- package-lock.json\r\n<\/code><\/pre>\n
gatsby-node.js\u6587\u4ef6\u5728\u7f51\u7ad9\u6784\u5efa\u8fc7\u7a0b\u4e2d\u53ea\u4f1a\u88ab\u6267\u884c\u4e00\u6b21\uff0c\u7528\u4e8e\u5bfc\u51fa\u8981\u4f7f\u7528\u7684API\u3002\u5b83\u5e94\u653e\u7f6e\u5728\u7f51\u7ad9\u7684\u6839\u8def\u5f84\u3002<\/p>\n
\u53c2\u8003\u6587\u4ef6
\ngatsby-node.js\u7684API\u6587\u4ef6\uff08\u5b98\u65b9\u6587\u6863\uff09<\/p><\/blockquote>\n
\u63a5\u4e0b\u6765\u5c1d\u8bd5\u521b\u5efa\u53d1\u5e03\u6587\u7ae0\u9875\u9762\u3002<\/h1>\n
\u4f7f\u7528React\u7ec4\u4ef6\u521b\u5efa\u56fa\u5b9a\u9875\u9762<\/h3>\n
\u5728src\/pages\u4e2d\u521b\u5efaReact\u7ec4\u4ef6\u3002<\/p>\n
import<\/span> React<\/span> from<\/span> '<\/span>react<\/span>'<\/span>\r\n\r\nconst<\/span> About<\/span> =<\/span> ()<\/span> =><\/span> (<\/span>\r\n  <<\/span>div<\/span>><\/span>\r\n    <<\/span>h1<\/span>><\/span>About Page<\/<\/span>h1<\/span>><\/span>\r\n    <<\/span>div<\/span>><\/span>This is a About Page<\/<\/span>div<\/span>><\/span>\r\n  <\/<\/span>div<\/span>><\/span>\r\n)<\/span>\r\n\r\nexport<\/span> default<\/span> About<\/span>\r\n<\/code><\/pre>\n
\u5f53\u8fde\u63a5\u5230http:\/\/localhost:8000\/about\u65f6\uff0cAbout\u9875\u9762\u4f1a\u6253\u5f00\u3002\u5728\u8fd9\u91cc\uff0c\u4f7f\u7528Next.js\u4e0e\u5b8c\u5168\u76f8\u540c\u3002\u5982\u679c\u53ea\u662f\u4e00\u4e2a\u56fa\u5b9a\u9875\u9762\u7684\u4f5c\u54c1\u96c6\u7f51\u7ad9\uff0c\u53ea\u9700\u8fd9\u6837\u5c31\u8db3\u591f\u4e86\uff0c\u4f46\u5982\u679c\u6709\u50cf\u535a\u5ba2\u4e00\u6837\u7684\u6587\u7ae0\u66f4\u65b0\uff0c\u60c5\u51b5\u5c31\u4e0d\u4e00\u6837\u4e86\u3002<\/p>\n
\u5173\u4e8eGatsby API\u7684createPages\u90e8\u5206<\/h3>\n
\u5728Gatsby\u4e2d\uff0c\u6709\u4e00\u4e2a\u540d\u4e3acreatePages\u7684API\u53ef\u4ee5\u4ece\u9875\u9762\u6a21\u677f\u7684React\u7ec4\u4ef6\u4e2d\u4ee5\u7f16\u7a0b\u65b9\u5f0f\u521b\u5efa\u9875\u9762\u3002\u53c2\u8003Gatsby\u4e3b\u9898\u7684\u6587\u4ef6\u7ed3\u6784\u4e5f\u5305\u62ec\u4e00\u4e2acomponents\/\u6587\u4ef6\u5939\u548c\u4e00\u4e2a\u72ec\u7acb\u7684templates\/\u6587\u4ef6\u5939\uff0c\u5177\u4f53\u5982\u4e0b\u6240\u8ff0\u3002<\/p>\n
\u7b80\u800c\u8a00\u4e4b\uff0c\u5982\u679c\u53ea\u4f7f\u7528React\u7ec4\u4ef6\u6765\u6784\u5efa\u535a\u5ba2\u7f51\u7ad9\uff0c\u90a3\u4e48\u6bcf\u7bc7\u6587\u7ae0\u90fd\u9700\u8981\u521b\u5efa\u4e00\u4e2aReact\u7ec4\u4ef6\u7684jsx\u6587\u4ef6\uff0c\u8fd9\u4e0e\u4f7f\u7528\u539f\u59cb\u7684HTML\u7f16\u7801\u7f51\u7ad9\u6ca1\u6709\u4ec0\u4e48\u533a\u522b\u3002\u56e0\u6b64\uff0c\u901a\u8fc7\u4f7f\u7528\u4ee5React\u7ec4\u4ef6\u4e3a\u539f\u578b\u7684createPages\u673a\u5236\u6765\u81ea\u52a8\u751f\u6210\u6587\u7ae0\u9875\u9762\u975e\u5e38\u6709\u7528\u3002<\/p>\n
\u5c06\u7528\u4e8e\u56fa\u5b9a\u9875\u9762\u7684React\u7ec4\u4ef6\u653e\u7f6e\u5728components\/\u76ee\u5f55\u4e0b\uff0c\u800c\u7528\u4e8e\u6587\u7ae0\u9875\u9762\u7684React\u7ec4\u4ef6\u5219\u653e\u7f6e\u5728templates\/\u76ee\u5f55\u4e0b\u3002\u867d\u7136\u5b83\u4eec\u90fd\u662fReact\u7ec4\u4ef6\u7684\u6839\u6e90\uff0c\u4f46\u533a\u5206\u5b83\u4eec\u5e76\u4e14\u4f7f\u5176\u6613\u4e8e\u7ba1\u7406\u548c\u4f7f\u7528\uff0c\u5c06\u5b83\u4eec\u5206\u5f00\u653e\u7f6e\u53ef\u4ee5\u8d77\u5230\u8fd9\u6837\u7684\u4f5c\u7528\u3002<\/p>\n
\u624b\u52a8\u4f20\u9012\u4e2a\u522b\u6587\u7ae0\u4fe1\u606f\u6570\u7ec4\u7684\u793a\u4f8b\uff08\u4e0d\u63a8\u8350\uff09<\/h3>\n
\u4e3a\u4e86\u7406\u89e3createPages\u7684\u673a\u5236\uff0c\u901a\u5e38\u5728gatsby-node.js\u4e2d\u53ea\u9700\u7f16\u5199API\u8bbe\u7f6e\uff0c\u7136\u540e\u5b9a\u4e49\u4e00\u4e2a\u6570\u7ec4\uff0c\u5e76\u624b\u52a8\u5c06\u6587\u7ae0\u4fe1\u606f\u653e\u5165\u8be5\u6570\u7ec4\u4e2d\uff0c\u4ee5\u4fbf\u6e32\u67d3\u9875\u9762\u8fdb\u884c\u7ec3\u4e60\u3002<\/p>\n
\u5728\u793a\u4f8b\u4ee3\u7801\u4e2d\uff0c\u9996\u5148\u5c06\u6587\u7ae0\u4fe1\u606f\u7684\u6570\u7ec4\u653e\u5165posts\u5e38\u91cf\u4e2d\uff0c\u5e76\u4f7f\u7528createPages\u65b9\u6cd5\u6765\u904d\u5386\u6570\u7ec4\u4e2d\u7684\u6587\u7ae0\u4fe1\u606f\uff0c\u5e76\u52a0\u8f7d\u6587\u7ae0\u9875\u9762\u7684\u8def\u5f84\uff08\u6c38\u4e45\u94fe\u63a5\uff09\u3001\u4f7f\u7528\u7684React\u7ec4\u4ef6\u4f4d\u7f6e\u4ee5\u53ca\u4f20\u9012\u7ed9React\u7ec4\u4ef6\u7684\u53d8\u91cf\u5b9a\u4e49\u4ee5\u4f9b\u6e32\u67d3\u4f7f\u7528\u3002<\/p>\n
const<\/span> path<\/span> =<\/span> require<\/span>(<\/span>\"<\/span>path<\/span>\"<\/span>);<\/span>\r\nconst<\/span> posts<\/span> =<\/span> [<\/span>\r\n  {<\/span>\r\n    path<\/span>:<\/span> \"<\/span>posts\/1<\/span>\"<\/span>,<\/span>\r\n    date<\/span>:<\/span> \"<\/span>2019\/01\/01<\/span>\"<\/span>,<\/span>\r\n    title<\/span>:<\/span> \"<\/span>\u6295\u7a3f1<\/span>\"<\/span>\r\n  },<\/span>\r\n  {<\/span>\r\n    path<\/span>:<\/span> \"<\/span>posts\/2<\/span>\"<\/span>,<\/span>\r\n    date<\/span>:<\/span> \"<\/span>2019\/01\/02<\/span>\"<\/span>,<\/span>\r\n    title<\/span>:<\/span> \"<\/span>\u6295\u7a3f2<\/span>\"<\/span>\r\n  }<\/span>\r\n];<\/span>\r\n\r\nexports<\/span>.<\/span>createPages<\/span> =<\/span> ({<\/span> graphql<\/span>,<\/span> actions<\/span> })<\/span> =><\/span> {<\/span>\r\n  const<\/span> {<\/span> createPage<\/span> }<\/span> =<\/span> actions<\/span>;<\/span>\r\n  return<\/span> new<\/span> Promise<\/span>((<\/span>resolve<\/span>,<\/span> reject<\/span>)<\/span> =><\/span> {<\/span>\r\n    posts<\/span>.<\/span>forEach<\/span>(<\/span> post<\/span> =><\/span>\r\n      createPage<\/span>({<\/span>\r\n        \/\/ \u30da\u30fc\u30b8\u306e\u30d1\u30b9\u540d<\/span>\r\n        path<\/span>:<\/span> post<\/span>.<\/span>path<\/span>,<\/span>\r\n        \/\/ \u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3068\u306a\u308b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u6307\u5b9a<\/span>\r\n        component<\/span>:<\/span> path<\/span>.<\/span>resolve<\/span>(<\/span>`src\/templates\/post.jsx`<\/span>),<\/span>\r\n        \/\/ \u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3068\u306a\u308b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u6e21\u3059\u5909\u6570<\/span>\r\n        context<\/span>:<\/span> {<\/span>\r\n          path<\/span>:<\/span> post<\/span>.<\/span>path<\/span>,<\/span>\r\n          date<\/span>:<\/span> post<\/span>.<\/span>date<\/span>,<\/span>\r\n          title<\/span>:<\/span> post<\/span>.<\/span>title<\/span>\r\n        }<\/span>\r\n      })<\/span>\r\n    );<\/span>\r\n    resolve<\/span>();<\/span>\r\n  });<\/span>\r\n};<\/span>\r\n<\/code><\/pre>\n
\u5c06\u5728\u4e0a\u6587\u4e2d\u51c6\u5907\u597d\u7684\u53d8\u91cf\uff0c\u6309\u7167\u6307\u5b9a\u7684\u65b9\u5f0f\u4f20\u9012\u7ed9\u4e0b\u9762\u7684React\u7ec4\u4ef6\u3002\u8be5\u7ec4\u4ef6\u4f1a\u7b80\u5355\u5730\u663e\u793a\u6587\u7ae0\u6807\u9898\u548c\u53d1\u5e03\u65e5\u671f\uff0c\u5e76\u4ee5\u6307\u5b9a\u7684\u6c38\u4e45\u94fe\u63a5\u751f\u6210\u53ef\u67e5\u770b\u7684\u6587\u7ae0\u3002<\/p>\n
import<\/span> React<\/span> from<\/span> '<\/span>react<\/span>'<\/span>\r\n\r\nconst<\/span> Post<\/span> =<\/span> ({<\/span> pageContext<\/span>:<\/span> {<\/span> title<\/span>,<\/span> path<\/span>,<\/span> date<\/span> }<\/span> })<\/span> =><\/span> (<\/span>\r\n  <<\/span>div<\/span>><\/span>\r\n    <<\/span>h1<\/span>><\/span>{<\/span>title<\/span>}<\/span><\/<\/span>h1<\/span>><\/span>\r\n    <<\/span>div<\/span>><\/span>{<\/span>date<\/span>}<\/span><\/<\/span>div<\/span>><\/span>\r\n  <\/<\/span>div<\/span>><\/span>\r\n)<\/span>\r\n\r\nexport<\/span> default<\/span> Post<\/span>\r\n<\/code><\/pre>\n
\u6253\u5f00\u5e94\u7528\u7a0b\u5e8f\u3002<\/p>\n
gatsby develop\r\n<\/code><\/pre>\n
\u5f53\u8fde\u63a5\u5230http:\/\/localhost:8000\/post1\u65f6\uff0c\u5c06\u663e\u793a\u540d\u4e3a\u201c\u6295\u7a3f1\u201d\u7684\u6587\u7ae0\u3002\u786e\u8ba4\u4e86createPages\u6b63\u5728\u8fd0\u884c\u3002<\/p>\n
\u6211\u6bc5\u7136\u51b3\u7136\u5730\u5229\u7528Gatsby\u7684\u529f\u80fd\uff0c\u5c1d\u8bd5\u751f\u6210\u53d1\u5e03\u6587\u7ae0\u9875\u9762\u3002<\/h1>\n
\u7528\u4e8e\u901a\u8fc7GraphQL\u81ea\u52a8\u83b7\u53d6md\u6587\u4ef6\u6587\u7ae0\u4fe1\u606f\u7684\u63d2\u4ef6\u914d\u7f6e\u3002<\/h3>\n
\u8fd9\u662f\u6211\u6700\u60f3\u4e86\u89e3\u7684\u90e8\u5206\u3002\u4e3a\u4e86\u5b9e\u73b0\u5728Next.js\u4e0a\u6784\u5efa\u535a\u5ba2\u7684\u76ee\u6807\uff0c\u6211\u8ba4\u4e3a\u6700\u7b80\u5355\u5feb\u901f\u7684\u65b9\u5f0f\u662f\u4f7f\u7528React\u548cGraphQL\u7684\u6700\u5c0f\u7ec4\u5408\u3002\u7136\u800c\uff0c\u7531\u4e8e\u8981\u4ecemd\u6587\u4ef6\u4e2d\u83b7\u53d6\u6587\u7ae0\u4fe1\u606f\uff0c\u6240\u4ee5\u5728Gatsby\u4e2d\u9700\u8981\u5b89\u88c5\u4e00\u4e2aMarkdown\u63d2\u4ef6\uff0c\u4f46\u8fd9\u6837\u5c31\u5fc5\u987b\u5c06\u5176\u4f5c\u4e3a\u4e00\u4e2aGatsby\u6a21\u5757\u6765\u8fd0\u884c\uff0c\u8fd9\u8ba9\u4eba\u611f\u89c9\u6709\u70b9\u50cf\u9ed1\u76d2\u5b50\uff0c\u4e0d\u592a\u7406\u60f3\u3002\u6211\u60f3\u4e86\u89e3\u5176\u4e2d\u7684\u5177\u4f53\u5185\u5bb9\u3002<\/p>\n
$ <\/span>npm install<\/span> --save<\/span> gatsby-source-filesystem gatsby-transformer-remark\r\n<\/code><\/pre>\n
\u5728gatsby-config.js\u6587\u4ef6\u4e2d\uff0c\u5c06Gatsby\u4e13\u7528\u63d2\u4ef6\u5217\u5728plugins\u4e2d\uff0c\u8fdb\u884c\u52a0\u8f7d\u548c\u914d\u7f6e\u3002<\/p>\n
gatsby-source-filesystem\u662f\u8b93Gatsby\u80fd\u5920\u5f9e\u6587\u4ef6\u7cfb\u7d71\u4e2d\u8b80\u53d6\u6587\u4ef6\u7684\u5de5\u5177\u3002\u5f9e\u9019\u88e1\u7684\u8a2d\u7f6e\u65b9\u5f0f\u4f86\u770b\uff0c\u5b83\u985e\u4f3c\u65bc\u5728node.js\u4e2d\u4f7f\u7528__dirname\u7b49\u529f\u80fd\u4f86\u8b80\u53d6\u975c\u614b\u6587\u4ef6\u7684app.use\u51fd\u6578\u3002\u5728resolve\u4e2d\uff0c\u9700\u8981\u586b\u5165\u5c0e\u5165\u7684\u63d2\u4ef6\u540d\u7a31\uff0coptions.path\u5247\u662f\u8981\u61c9\u7528\u7684\u76ee\u9304\uff0coptions.name\u53ef\u80fd\u662f\u7528\u65bc\u8abf\u7528\u6642\u7684id\u4e4b\u985e\u7684\u6771\u897f\uff1f<\/p>\n
gatsby-transformer-remark\u662f\u7528\u4e8e\u89e3\u6790Markdown\u7684\u5de5\u5177\u3002\u867d\u7136\u6709\u4e00\u4e9b\u9009\u9879\u53ef\u4f9b\u4f7f\u7528\uff0c\u4f46\u793a\u4f8b\u4ee3\u7801\u4e2d\u5e76\u672a\u8bbe\u7f6e\u3002\u6211\u5bf9\u8fd9\u4e00\u70b9\u4e0d\u592a\u4e86\u89e3\u3002\u603b\u4e4b\uff0c\u5728\u5b98\u65b9\u6587\u6863\u4e2d\u6709\u5173\u4e8e\u4f7f\u7528GraphQL\u53d1\u51fa\u67e5\u8be2\u7684\u8bf4\u660e\uff0c\u4e5f\u8bb8\u8fd9\u5c31\u662f\u6211\u60f3\u8981\u7684\u7b54\u6848\u3002<\/p>\n
\u53c2\u8003\u6587\u732e
\ngatsby\u6e90\u6587\u4ef6\u7cfb\u7edf
\ngatsby\u8f6c\u6362\u5668\u6ce8\u91ca<\/p><\/blockquote>\n
module<\/span>.<\/span>exports<\/span> =<\/span> {<\/span>\r\n  plugins<\/span>:<\/span> [<\/span>\r\n    {<\/span>\r\n      resolve<\/span>:<\/span> `gatsby-source-filesystem`<\/span>,<\/span>\r\n      options<\/span>:<\/span> {<\/span>\r\n        path<\/span>:<\/span> `<\/span>${<\/span>__dirname<\/span>}<\/span>\/src\/contents`<\/span>,<\/span>\r\n        name<\/span>:<\/span> \"<\/span>contents<\/span>\"<\/span>,<\/span>\r\n      }<\/span>\r\n    },<\/span>\r\n    `gatsby-transformer-remark`<\/span>,<\/span>\r\n  ]<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
\u521b\u5efa\u4e00\u4e2a\u63cf\u8ff0\u65b0\u95fb\u4fe1\u606f\u7684md\u6587\u4ef6\u3002<\/h3>\n
\u7136\u540e\uff0c\u901a\u8fc7Markdown\u5728\u6307\u5b9a\u7684\u63d2\u4ef6\u52a0\u8f7d\u8bbe\u7f6e\u4e2d\uff0c\u5c06\u6587\u7ae0\u5185\u5bb9\u64b0\u5199\u4e3amd\u6587\u4ef6\uff0c\u5e76\u521b\u5efa\u5728src\/contents\/\u8def\u5f84\u4e0b\u3002\u636e\u8bf4\uff0c\u901a\u8fc7gatsby-transformer-remark\u63d2\u4ef6\uff0c\u53ef\u4ee5\u901a\u8fc7GraphQL\u89e3\u6790md\u6587\u4ef6\u7684Front Matter\u5e76\u8fdb\u884c\u83b7\u53d6\u3002<\/p>\n
---\r\npath: \"posts\/post1\"\r\ndate: \"2019\u5e741\u67081\u65e5\"\r\ntitle: \"\u6295\u7a3f1\"\r\n---\r\n\r\n# \u6295\u7a3f1\r\n\r\n\u8a18\u4e8b\u306e\u5185\u5bb9\u3002\r\n<\/code><\/pre>\n
---\r\npath: \"posts\/post2\"\r\ndate: \"2019\u5e741\u67082\u65e5\"\r\ntitle: \"\u6295\u7a3f2\"\r\n---\r\n\r\n# \u6295\u7a3f2\r\n\r\n\u8a18\u4e8b\u306e\u5185\u5bb9\u3002\r\n<\/code><\/pre>\n
\u8bf7\u7f16\u5199\u4e00\u6bb5\u4ee3\u7801\uff0c\u901a\u8fc7GraphQL\u83b7\u53d6md\u6587\u4ef6\u7684\u6587\u7ae0\u4fe1\u606f\u3002<\/h3>\n
\u5728gatsby-node.js\u4e2d\u8fdb\u884c\u63d2\u4ef6\u8bbe\u7f6e\uff0c\u5728src\/contents\/\u76ee\u5f55\u4e2d\u6709md\u6587\u4ef6\u5b58\u50a8\u6587\u7ae0\u4fe1\u606f\u3002\u7136\u540e\u5728gatsby-config.js\u4e2d\u7f16\u5199\u5904\u7406\u5e76\u901a\u8fc7GraphQL\u83b7\u53d6\u89e3\u6790\u540e\u7684md\u6587\u4ef6\u6587\u7ae0\u4fe1\u606f\uff0c\u751f\u6210\u9875\u9762\u7684\u5904\u7406\u3002<\/p>\n
const<\/span> path<\/span> =<\/span> require<\/span>(<\/span>'<\/span>path<\/span>'<\/span>)<\/span>\r\n\r\nexports<\/span>.<\/span>createPages<\/span> =<\/span> ({<\/span> graphql<\/span>,<\/span> actions<\/span> })<\/span> =><\/span> {<\/span>\r\n  const<\/span> {<\/span> createPage<\/span> }<\/span> =<\/span> actions<\/span>\r\n\r\n  return<\/span> graphql<\/span>(<\/span>`\r\n    {\r\n      allMarkdownRemark(\r\n        sort: {\r\n          order: DESC,\r\n          fields: [frontmatter___date]\r\n        }\r\n        limit: 1000\r\n      ){\r\n        edges {\r\n          node {\r\n            frontmatter {\r\n              path\r\n              date\r\n              title\r\n            }\r\n          }\r\n        }\r\n      }\r\n    }\r\n  `<\/span>).<\/span>then<\/span>(<\/span>result<\/span> =><\/span> {<\/span>\r\n    if<\/span> (<\/span>result<\/span>.<\/span>errors<\/span>)<\/span> return<\/span> Promise<\/span>.<\/span>reject<\/span>(<\/span>result<\/span>.<\/span>errors<\/span>)<\/span>\r\n\r\n    result<\/span>.<\/span>data<\/span>.<\/span>allMarkdownRemark<\/span>.<\/span>edges<\/span>.<\/span>forEach<\/span>(({<\/span> node<\/span> })<\/span> =><\/span> {<\/span>\r\n      createPage<\/span>({<\/span>\r\n        path<\/span>:<\/span> node<\/span>.<\/span>frontmatter<\/span>.<\/span>path<\/span>,<\/span>\r\n        component<\/span>:<\/span> path<\/span>.<\/span>resolve<\/span>(<\/span>`src\/templates\/blog-template.js`<\/span>),<\/span>\r\n        context<\/span>:<\/span> {<\/span>\r\n          path<\/span>:<\/span> node<\/span>.<\/span>frontmatter<\/span>.<\/span>path<\/span>,<\/span>\r\n          date<\/span>:<\/span> node<\/span>.<\/span>frontmatter<\/span>.<\/span>date<\/span>,<\/span>\r\n          title<\/span>:<\/span> node<\/span>.<\/span>frontmatter<\/span>.<\/span>title<\/span>,<\/span>\r\n        }<\/span>\r\n      })<\/span>\r\n    })<\/span>\r\n  })<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
\u5728\u4e0a\u8ff0\u7684\u4ee3\u7801\u4e2d\u7684\u8fd4\u56de graphql \u90e8\u5206\u4f7f\u7528 GraphQL \u53d1\u51fa\u4e86\u67e5\u8be2\u3002<\/p>\n
\u5728\u8fd9\u6bb5\u63cf\u8ff0\u4e2d\uff0c\u5b83\u63d0\u5230\u4e86\u8981\u83b7\u53d6MarkdownRemark\u8282\u70b9\u7684\u90e8\u5206\uff0c\u53ef\u4ee5\u53c2\u8003\u5b98\u65b9\u6587\u6863\u4e2dgatsby-transformer-remark\u7684\u7ae0\u8282\u3002<\/p>\n
\u6211\u6700\u521d\u60f3\u77e5\u9053Remark\u662f\u4ec0\u4e48\u4e1c\u897f\uff0c\u4e8e\u662f\u5728\u8c37\u6b4c\u4e0a\u641c\u7d22\uff0c\u53d1\u73b0\u4e86\u5b98\u65b9\u7f51\u7ad9\u4e0a\u7684\u6807\u8bed\uff1a”\u4e00\u4e2a\u642d\u8f7d\u4e86\u63d2\u4ef6\u7684Markdown\u5904\u7406\u5668”\u3002\u770b\u8d77\u6765”MarkdownRemark”\u8fd9\u4e2a\u8bcd\u7ec4\u610f\u5473\u7740\u5b83\u4f7f\u7528\u4e86Markdown\u5e93\u3002<\/p>\n
Markdown\u7684\u5de8\u5927\u4e16\u754c\uff0c\u53c2\u8003\u6587\u732eRemark.js\u5b98\u65b9\u7f51\u7ad9\u3002<\/p><\/blockquote>\n
\u6839\u636e\u5b98\u65b9\u7f51\u7ad9\u7684\u89e3\u91ca\uff0c\u636e\u8bf4\u5c06\u7528\u4e8e\u63cf\u8ff0md\u6587\u4ef6\u6587\u7ae0\u7684\u5143\u4fe1\u606f\u7684frontmatter\u5b57\u6bb5\u8f6c\u6362\u4e3aGraphQL\u5b57\u6bb5\uff0c\u5e76\u5728allMarkdownRemark\u8282\u70b9\uff08\u5373allMarkdownRemark.edges.node\uff09\u4e2d\u88ab\u68c0\u6d4b\u5230\u3002\u6295\u7a3f\u6587\u7ae0\u7684md\u6587\u4ef6\u7684frontmatter\u4e2d\u5305\u542b\u4e86\u4e09\u4e2a\u5143\u4fe1\u606f\uff0c\u5373\u8def\u5f84\u3001\u65e5\u671f\u548c\u6807\u9898\uff0c\u5e76\u5c06\u5176\u8f6c\u6362\u4e3aGraphQL\u5b57\u6bb5\u3002<\/p>\n
    \n
  • \n
      allMarkdownRemark.edges.node.frontmatter.path<\/ul>\n<\/li>\n<\/ul>\n
       <\/p>\n
        \n
      • \n
          allMarkdownRemark.edges.node.frontmatter.date<\/ul>\n<\/li>\n<\/ul>\n
           <\/p>\n
            allMarkdownRemark.edges.node.frontmatter.title<\/ul>\n
            \u603b\u800c\u8a00\u4e4b\uff0callMarkdownRemark\uff08\u53c2\u6570\uff09\u7684\u610f\u601d\u662f\u6309\u65e5\u671f\u987a\u5e8f\u5bf9Markdown\u683c\u5f0f\u7684\u6587\u7ae0\u8fdb\u884c\u6392\u5e8f\uff0c\u5e76\u6700\u591a\u53d6\u5f971000\u6761\u3002\u800callMarkdownRemark(){\u83b7\u53d6\u6570\u636e}\u7684\u90e8\u5206\u6307\u5b9a\u4e86\u6587\u7ae0\u7684\u5143\u4fe1\u606f\u3002GraphQL\u7684\u6570\u636e\u7c7b\u578b\u548c\u6a21\u5f0f\u5b9a\u4e49\u53ef\u80fd\u5728Gatsby\u63d2\u4ef6\u5185\u90e8\u5b8c\u6210\u3002<\/p>\n
            \u5728\u8fd9\u91cc\u91cd\u65b0\u542f\u52a8\u5e94\u7528\u7a0b\u5e8f\u3002<\/p>\n
            $ <\/span>gatsby develop\r\n<\/code><\/pre>\n
            \u5f53\u8fde\u63a5\u5230http:\/\/localhost:8000\/post1\u65f6\uff0c\u4f1a\u663e\u793a\u201c\u6295\u7a3f1\u201d\u3002<\/p>\n
            \u5728React\u7ec4\u4ef6\u5185\u5b9a\u4e49GraphQL\u6a21\u5f0f<\/h3>\n
            \u5f53\u5728gatsby-node.js\u4e2d\u5b9a\u4e49GraphQL\u6a21\u5f0f\u65f6\uff0c\u9664\u975e\u4f7f\u7528createPages\uff0c\u5426\u5219\u5c06\u4e0d\u4f1a\u901a\u8fc7GraphQL\u67e5\u8be2\u6765\u751f\u6210\u6587\u7ae0\u3002\u8fd9\u4e3a\u4ec0\u4e48\u662f\u4e2a\u95ee\u9898\u5462\uff1f\u53ef\u4ee5\u63a8\u6d4b\uff0c\u56e0\u4e3a\u6309\u89c4\u8303\u53ea\u80fd\u63d0\u4f9b\u4e00\u4e2a\u540d\u4e3agatsby-node.js\u7684\u6587\u4ef6\uff0c\u6240\u4ee5\u5982\u679c\u60f3\u8981\u6839\u636e\u573a\u666f\u4f7f\u7528\u4e0d\u540c\u7684GraphQL\u67e5\u8be2\uff0c\u5c31\u9700\u8981\u5c06\u6240\u6709\u67e5\u8be2\u5b9a\u4e49\u90fd\u5199\u5728\u540c\u4e00\u4e2a\u6587\u4ef6\u4e2d\uff0c\u8fd9\u5c06\u964d\u4f4e\u53ef\u8bfb\u6027\uff0c\u5e76\u4e14\u96be\u4ee5\u7406\u89e3\u54ea\u4e2a\u67e5\u8be2\u9002\u7528\u4e8e\u54ea\u79cd\u60c5\u51b5\u3002\u6362\u53e5\u8bdd\u8bf4\uff0c\u8fd9\u79cd\u65b9\u6cd5\u7f3a\u4e4f\u53ef\u7ef4\u62a4\u6027\u3002<\/p>\n
            \u5728GatsbyJS\u4e2d\uff0c\u53ef\u4ee5\u5728React\u7ec4\u4ef6\u4e2d\u5b9a\u4e49GraphQL\u7684\u67e5\u8be2\u548c\u6a21\u5f0f\uff0c\u56e0\u6b64\u53ef\u4ee5\u5c06\u201c\u6570\u636e\u83b7\u53d6\u5904\u7406\u201d\uff0c\u201cJSX\u201d\u548c\u201c\u67e5\u8be2\u53d1\u51fa\u201d\u5199\u5728\u4f5c\u4e3a\u6bcf\u7bc7\u6587\u7ae0\u6a21\u677f\u7684React\u7ec4\u4ef6\u6587\u4ef6\u4e2d\u3002\u8fd9\u79cd\u65b9\u6cd5\u7684\u4f18\u70b9\u662f\u53ef\u4ee5\u5c06\u4e0e\u751f\u6210\u9875\u9762\u5185\u5bb9\u76f8\u5173\u7684\u5904\u7406\u90fd\u5199\u5728\u4e00\u4e2a\u6587\u4ef6\u4e2d\uff0c\u4ece\u800c\u66f4\u5bb9\u6613\u8fdb\u884c\u7ef4\u62a4\u3002<\/p>\n
            \u4f7f\u7528GraphQL\u8fdb\u884c\u7684\u4e09\u4e2a\u91cd\u8981\u64cd\u4f5c\u53ef\u4ee5\u4f5c\u4e3a\u590d\u4e60\u7684\u4e00\u90e8\u5206<\/p>\n
              \n
            • \n
                \u30b9\u30ad\u30fc\u30de\u306e\u5b9a\u7fa9<\/ul>\n<\/li>\n<\/ul>\n
                \u30c7\u30fc\u30bf\u578b\u306e\u5b9a\u7fa9 type [Example]<\/p>\n
                \u30af\u30a8\u30ea\u306e\u5b9a\u7fa9 type Query<\/p>\n
                \u30c7\u30fc\u30bf\u53d6\u5f97\u51e6\u7406\u306e\u5b9a\u7fa9 resolvers<\/p>\n
                \u30af\u30a8\u30ea\u767a\u884c graphql\uff40\uff40<\/p>\n
                \u6211\u8ba4\u4e3a\uff0c\u5176\u4e2d\u7684Schema\u5b9a\u4e49\u662f\u7531Gatsby\u63d2\u4ef6gatsby-transformer-remark\u5b8c\u6210\u7684\uff08\u9884\u8ba1\uff09\uff0c\u6240\u4ee5\u53ea\u9700\u8981\u8003\u8651\u5269\u4e0b\u7684\u4e24\u4e2a\u3002\u8fd9\u6837\u8bf4\u6765\uff0c\u8981\u5728Gatsby\u4e3b\u9898\u4e2d\u4f7f\u7528GraphQL\uff0c\u53ea\u9700\u7528React\u7ec4\u4ef6\u7f16\u5199\u201c\u6570\u636e\u83b7\u53d6\u5904\u7406\u201d\uff0c\u201c\u67e5\u8be2\u53d1\u9001\u201d\u548c\u201cJSX\u201d\u5373\u53ef\u3002<\/p>\n
                exports<\/span>.<\/span>createPages<\/span> =<\/span> ({<\/span> graphql<\/span>,<\/span> actions<\/span> })<\/span> =><\/span> {<\/span>\r\n  \/\/ \u5168\u4f53\u7684\u306b\u7701\u7565<\/span>\r\n  context<\/span>:<\/span> {<\/span>\r\n    path<\/span>:<\/span> node<\/span>.<\/span>frontmatter<\/span>.<\/span>path<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
                \u53ea\u9700\u4e00\u4e2a\u9009\u62e9\uff0c\u5c06\u4ee5\u4e0b\u5185\u5bb9\u7528\u4e2d\u56fd\u6bcd\u8bed\u8fdb\u884c\u8f6c\u8ff0\uff1a
                \nGatsby\u5c06\u67e5\u8be2\u7ed3\u679c\u4f5c\u4e3adata\u5c5e\u6027\u8fd4\u56de\u7ed9\u6570\u636e\u83b7\u53d6\u5904\u7406\u51fd\u6570\u7684props\uff0c\u56e0\u6b64\u8bf7\u8bb0\u4f4f\u8fd9\u4e00\u89c4\u8303\u3002\u4ee5\u514d\u56f0\u60d1\u4e8e”data\u4ece\u54ea\u91cc\u6765\u7684\uff01”\u3002<\/p>\n
                import<\/span> React<\/span> from<\/span> '<\/span>react<\/span>'<\/span>\r\nimport<\/span> {<\/span> graphql<\/span> }<\/span> from<\/span> '<\/span>gatsby<\/span>'<\/span>\r\n\r\nconst<\/span> BlogTemplate<\/span> =<\/span> ({<\/span> data<\/span> })<\/span> =><\/span> {<\/span>\r\n  const<\/span> {<\/span>\r\n    markdownRemark<\/span>:<\/span> {<\/span>\r\n      html<\/span>,<\/span>\r\n      frontmatter<\/span>:<\/span> {<\/span>\r\n        title<\/span>,<\/span>\r\n        date<\/span>\r\n      }<\/span>\r\n    }<\/span>\r\n  }<\/span> =<\/span> data<\/span>\r\n  return<\/span> (<\/span>\r\n    <<\/span>div<\/span>><\/span>\r\n      <<\/span>h1<\/span>><\/span>{<\/span>`<\/span>${<\/span>title<\/span>}<\/span> Page`<\/span>}<\/span><\/<\/span>h1<\/span>><\/span>\r\n      <<\/span>div<\/span>><\/span>date : {<\/span>date<\/span>}<\/span><\/<\/span>div<\/span>><\/span>\r\n      <<\/span>div<\/span> dangerouslySetInnerHTML<\/span>=<\/span>{<\/span>{<\/span> __html<\/span>:<\/span> html<\/span> }<\/span>}<\/span> \/><\/span>\r\n    <\/<\/span>div<\/span>><\/span>\r\n  )<\/span>\r\n}<\/span>\r\n\r\nexport<\/span> default<\/span> BlogTemplate<\/span>\r\n\r\nexport<\/span> const<\/span> pageQuery<\/span> =<\/span> graphql<\/span>`\r\n  query($path: String!) {\r\n    markdownRemark(frontmatter: { path: { eq: $path } }) {\r\n      html\r\n      frontmatter {\r\n        date\r\n        title\r\n      }\r\n    }\r\n  }\r\n`<\/span>\r\n<\/code><\/pre>\n
                \u5728\u6b64\u91cd\u65b0\u542f\u52a8\u5e94\u7528\u7a0b\u5e8f\u3002<\/p>\n
                $ <\/span>gatsby develop\r\n<\/code><\/pre>\n
                \u5f53\u8fde\u63a5\u81f3 http:\/\/localhost:8000\/post1 \u65f6\uff0c\u5c06\u5c55\u793a”\u6295\u7a3f1″\u9875\u9762\u3002\u6210\u529f\u83b7\u53d6\u4e86\u535a\u5ba2\u57fa\u672c\u529f\u80fd\u4e2d\u7684\u6587\u7ae0\u4fe1\u606f\u3002\u540c\u6837\uff0c\u5982\u679c\u5728 src\/pages\/index.js \u7b49\u4f4d\u7f6e\u7f16\u5199 GraphQL \u7684\u6a21\u5f0f\uff0c\u8fd8\u53ef\u4ee5\u5b9e\u73b0\u6587\u7ae0\u5217\u8868\u7b49\u5185\u5bb9\u7684\u83b7\u53d6\u3002<\/p>\n
                GraphQL\u7684\u8bed\u6cd5\u901f\u67e5\u8868<\/h1>\n
                \u6211\u4e2a\u4eba\u7684\u89c2\u70b9\u662f\uff0c\u6211\u9009\u62e9\u6309\u7167\u8fd9\u79cd\u611f\u89c9\u6765\u533a\u5206\u3002\u6211\u5e0c\u671b\u66f4\u597d\u5730\u7406\u89e3\u5e76\u6e05\u6670\u5730\u8868\u8fbe\u8fd9\u4e00\u70b9\u3002<\/p>\n
                typeDefs\u306f\u30b9\u30ad\u30fc\u30de\u5b9a\u7fa9\u3002<\/p>\n
                graphql\uff40\uff40\u3068\u8a18\u8ff0\u3055\u308c\u3066\u3044\u305f\u3089\u30af\u30a8\u30ea\u767a\u884c\u3002
                \n\u95a2\u6570\u3060\u3063\u305f\u3089\u30c7\u30fc\u30bf\u53d6\u5f97\u51e6\u7406\u3002<\/p>\n
                \u867d\u7136\u6211\u5dee\u70b9\u5fd8\u4e86\uff0c\u4f46\u662f\u6211\u4eec\u73b0\u5728\u8981\u8ba8\u8bba\u4e00\u4e0bGatsby\u4e3b\u9898\u7684\u5206\u6790\u3002<\/h1>\n
                \u56e0\u4e3a\u6211\u60f3\u8d77\u8fd9\u7bc7\u6587\u7ae0\u7684\u4e3b\u8981\u76ee\u7684\u662f\u8981\u5b9e\u73b0\u5728Next.js\u5236\u4f5c\u7684\u535a\u5ba2\u6295\u7a3f\u6587\u7ae0\u4e2d\u6dfb\u52a0\u5206\u7c7b\u548c\u6807\u7b7e\u529f\u80fd\uff0c\u6240\u4ee5\u6211\u51b3\u5b9a\u53bb\u89e3\u8bfb\u5df2\u7ecf\u5b9e\u73b0\u4e86\u8fd9\u4e9b\u529f\u80fd\u7684Gatsby\u4e3b\u9898\u4ee3\u7801\u3002\u5b66\u4e60\u89e3\u8bfb\u4ee3\u7801\u7684\u77e5\u8bc6\u4e00\u76f4\u662f\u6211\u5230\u76ee\u524d\u4e3a\u6b62\u7684\u5b66\u4e60\u5185\u5bb9\u3002\u8981\u89e3\u8bfb\u7684Gatsby\u4e3b\u9898\u5c31\u662f\u4e4b\u524d\u63d0\u5230\u7684gatsby-advanced-starter\uff0c\u9996\u5148\u6211\u4f1a\u5c06\u7126\u70b9\u653e\u5728\u8be5\u9879\u76ee\u6587\u4ef6\u7684gatsby-node.js\u3001src\/components\/PostListing.jsx\u548csrc\/templates\/listing.jsx\u7b49\u5730\u65b9\uff0c\u6765\u8003\u5bdf\u4ee3\u7801\u7684\u542b\u4e49\u548c\u76f8\u5173\u6027\u3002<\/p>\n
                \u53c2\u8003\u6587\u732e
                \ngatsby-advanced-starter<\/p><\/blockquote>\n
                \u7531\u4e8e\u8fd9\u90e8\u5206\u4ee3\u7801\u542b\u6709\u6574\u4e2a\u4e3b\u9898\u4e2d\u591a\u4f59\u7684\u5904\u7406\uff0c\u5bfc\u81f4\u89e3\u8bfb\u56f0\u96be\uff0c\u56e0\u6b64\u6211\u51b3\u5b9a\u5148\u653e\u5728\u4e00\u8fb9\uff0c\u7136\u540e\u4ed4\u7ec6\u8c03\u67e5\u3002\u6682\u65f6\u5148\u9644\u4e0a\u4ee3\u7801\u793a\u4f8b\u548c\u89e3\u8bfb\u7684\u8349\u7a3f\u3002<\/p>\n
                \u793a\u4f8b\u4ee3\u7801<\/h3>\n
                \/* eslint \"no-console\": \"off\"  *\/<\/span>\r\n\r\nconst<\/span> path<\/span> =<\/span> require<\/span>(<\/span>\"<\/span>path<\/span>\"<\/span>);<\/span>\r\nconst<\/span> _<\/span> =<\/span> require<\/span>(<\/span>\"<\/span>lodash<\/span>\"<\/span>);<\/span>\r\nconst<\/span> moment<\/span> =<\/span> require<\/span>(<\/span>\"<\/span>moment<\/span>\"<\/span>);<\/span>\r\nconst<\/span> siteConfig<\/span> =<\/span> require<\/span>(<\/span>\"<\/span>.\/data\/SiteConfig<\/span>\"<\/span>);<\/span>\r\n\r\nexports<\/span>.<\/span>onCreateNode<\/span> =<\/span> ({<\/span> node<\/span>,<\/span> actions<\/span>,<\/span> getNode<\/span> })<\/span> =><\/span> {<\/span>\r\n  const<\/span> {<\/span> createNodeField<\/span> }<\/span> =<\/span> actions<\/span>;<\/span>\r\n  let<\/span> slug<\/span>;<\/span>\r\n  if<\/span> (<\/span>node<\/span>.<\/span>internal<\/span>.<\/span>type<\/span> ===<\/span> \"<\/span>MarkdownRemark<\/span>\"<\/span>)<\/span> {<\/span>\r\n    const<\/span> fileNode<\/span> =<\/span> getNode<\/span>(<\/span>node<\/span>.<\/span>parent<\/span>);<\/span>\r\n    const<\/span> parsedFilePath<\/span> =<\/span> path<\/span>.<\/span>parse<\/span>(<\/span>fileNode<\/span>.<\/span>relativePath<\/span>);<\/span>\r\n    if<\/span> (<\/span>\r\n      Object<\/span>.<\/span>prototype<\/span>.<\/span>hasOwnProperty<\/span>.<\/span>call<\/span>(<\/span>node<\/span>,<\/span> \"<\/span>frontmatter<\/span>\"<\/span>)<\/span> &&<\/span>\r\n      Object<\/span>.<\/span>prototype<\/span>.<\/span>hasOwnProperty<\/span>.<\/span>call<\/span>(<\/span>node<\/span>.<\/span>frontmatter<\/span>,<\/span> \"<\/span>title<\/span>\"<\/span>)<\/span>\r\n    )<\/span> {<\/span>\r\n      slug<\/span> =<\/span> `\/<\/span>${<\/span>_<\/span>.<\/span>kebabCase<\/span>(<\/span>node<\/span>.<\/span>frontmatter<\/span>.<\/span>title<\/span>)}<\/span>`<\/span>;<\/span>\r\n    }<\/span> else<\/span> if<\/span> (<\/span>parsedFilePath<\/span>.<\/span>name<\/span> !==<\/span> \"<\/span>index<\/span>\"<\/span> &&<\/span> parsedFilePath<\/span>.<\/span>dir<\/span> !==<\/span> \"\"<\/span>)<\/span> {<\/span>\r\n      slug<\/span> =<\/span> `\/<\/span>${<\/span>parsedFilePath<\/span>.<\/span>dir<\/span>}<\/span>\/<\/span>${<\/span>parsedFilePath<\/span>.<\/span>name<\/span>}<\/span>\/`<\/span>;<\/span>\r\n    }<\/span> else<\/span> if<\/span> (<\/span>parsedFilePath<\/span>.<\/span>dir<\/span> ===<\/span> \"\"<\/span>)<\/span> {<\/span>\r\n      slug<\/span> =<\/span> `\/<\/span>${<\/span>parsedFilePath<\/span>.<\/span>name<\/span>}<\/span>\/`<\/span>;<\/span>\r\n    }<\/span> else<\/span> {<\/span>\r\n      slug<\/span> =<\/span> `\/<\/span>${<\/span>parsedFilePath<\/span>.<\/span>dir<\/span>}<\/span>\/`<\/span>;<\/span>\r\n    }<\/span>\r\n\r\n    if<\/span> (<\/span>Object<\/span>.<\/span>prototype<\/span>.<\/span>hasOwnProperty<\/span>.<\/span>call<\/span>(<\/span>node<\/span>,<\/span> \"<\/span>frontmatter<\/span>\"<\/span>))<\/span> {<\/span>\r\n      if<\/span> (<\/span>Object<\/span>.<\/span>prototype<\/span>.<\/span>hasOwnProperty<\/span>.<\/span>call<\/span>(<\/span>node<\/span>.<\/span>frontmatter<\/span>,<\/span> \"<\/span>slug<\/span>\"<\/span>))<\/span>\r\n        slug<\/span> =<\/span> `\/<\/span>${<\/span>_<\/span>.<\/span>kebabCase<\/span>(<\/span>node<\/span>.<\/span>frontmatter<\/span>.<\/span>slug<\/span>)}<\/span>`<\/span>;<\/span>\r\n      if<\/span> (<\/span>Object<\/span>.<\/span>prototype<\/span>.<\/span>hasOwnProperty<\/span>.<\/span>call<\/span>(<\/span>node<\/span>.<\/span>frontmatter<\/span>,<\/span> \"<\/span>date<\/span>\"<\/span>))<\/span> {<\/span>\r\n        const<\/span> date<\/span> =<\/span> moment<\/span>(<\/span>node<\/span>.<\/span>frontmatter<\/span>.<\/span>date<\/span>,<\/span> siteConfig<\/span>.<\/span>dateFromFormat<\/span>);<\/span>\r\n        if<\/span> (<\/span>!<\/span>date<\/span>.<\/span>isValid<\/span>)<\/span>\r\n          console<\/span>.<\/span>warn<\/span>(<\/span>`WARNING: Invalid date.`<\/span>,<\/span> node<\/span>.<\/span>frontmatter<\/span>);<\/span>\r\n\r\n        createNodeField<\/span>({<\/span> node<\/span>,<\/span> name<\/span>:<\/span> \"<\/span>date<\/span>\"<\/span>,<\/span> value<\/span>:<\/span> date<\/span>.<\/span>toISOString<\/span>()<\/span> });<\/span>\r\n      }<\/span>\r\n    }<\/span>\r\n    createNodeField<\/span>({<\/span> node<\/span>,<\/span> name<\/span>:<\/span> \"<\/span>slug<\/span>\"<\/span>,<\/span> value<\/span>:<\/span> slug<\/span> });<\/span>\r\n  }<\/span>\r\n};<\/span>\r\n\r\nexports<\/span>.<\/span>createPages<\/span> =<\/span> async<\/span> ({<\/span> graphql<\/span>,<\/span> actions<\/span> })<\/span> =><\/span> {<\/span>\r\n  const<\/span> {<\/span> createPage<\/span> }<\/span> =<\/span> actions<\/span>;<\/span>\r\n  const<\/span> postPage<\/span> =<\/span> path<\/span>.<\/span>resolve<\/span>(<\/span>\"<\/span>src\/templates\/post.jsx<\/span>\"<\/span>);<\/span>\r\n  const<\/span> tagPage<\/span> =<\/span> path<\/span>.<\/span>resolve<\/span>(<\/span>\"<\/span>src\/templates\/tag.jsx<\/span>\"<\/span>);<\/span>\r\n  const<\/span> categoryPage<\/span> =<\/span> path<\/span>.<\/span>resolve<\/span>(<\/span>\"<\/span>src\/templates\/category.jsx<\/span>\"<\/span>);<\/span>\r\n  const<\/span> listingPage<\/span> =<\/span> path<\/span>.<\/span>resolve<\/span>(<\/span>\"<\/span>.\/src\/templates\/listing.jsx<\/span>\"<\/span>);<\/span>\r\n\r\n  \/\/ Get a full list of markdown posts<\/span>\r\n  const<\/span> markdownQueryResult<\/span> =<\/span> await<\/span> graphql<\/span>(<\/span>`\r\n    {\r\n      allMarkdownRemark {\r\n        edges {\r\n          node {\r\n            fields {\r\n              slug\r\n            }\r\n            frontmatter {\r\n              title\r\n              tags\r\n              category\r\n              date\r\n            }\r\n          }\r\n        }\r\n      }\r\n    }\r\n  `<\/span>);<\/span>\r\n\r\n  if<\/span> (<\/span>markdownQueryResult<\/span>.<\/span>errors<\/span>)<\/span> {<\/span>\r\n    console<\/span>.<\/span>error<\/span>(<\/span>markdownQueryResult<\/span>.<\/span>errors<\/span>);<\/span>\r\n    throw<\/span> markdownQueryResult<\/span>.<\/span>errors<\/span>;<\/span>\r\n  }<\/span>\r\n\r\n  const<\/span> tagSet<\/span> =<\/span> new<\/span> Set<\/span>();<\/span>\r\n  const<\/span> categorySet<\/span> =<\/span> new<\/span> Set<\/span>();<\/span>\r\n\r\n  const<\/span> postsEdges<\/span> =<\/span> markdownQueryResult<\/span>.<\/span>data<\/span>.<\/span>allMarkdownRemark<\/span>.<\/span>edges<\/span>;<\/span>\r\n\r\n  \/\/ Sort posts<\/span>\r\n  postsEdges<\/span>.<\/span>sort<\/span>((<\/span>postA<\/span>,<\/span> postB<\/span>)<\/span> =><\/span> {<\/span>\r\n    const<\/span> dateA<\/span> =<\/span> moment<\/span>(<\/span>\r\n      postA<\/span>.<\/span>node<\/span>.<\/span>frontmatter<\/span>.<\/span>date<\/span>,<\/span>\r\n      siteConfig<\/span>.<\/span>dateFromFormat<\/span>\r\n    );<\/span>\r\n\r\n    const<\/span> dateB<\/span> =<\/span> moment<\/span>(<\/span>\r\n      postB<\/span>.<\/span>node<\/span>.<\/span>frontmatter<\/span>.<\/span>date<\/span>,<\/span>\r\n      siteConfig<\/span>.<\/span>dateFromFormat<\/span>\r\n    );<\/span>\r\n\r\n    if<\/span> (<\/span>dateA<\/span>.<\/span>isBefore<\/span>(<\/span>dateB<\/span>))<\/span> return<\/span> 1<\/span>;<\/span>\r\n    if<\/span> (<\/span>dateB<\/span>.<\/span>isBefore<\/span>(<\/span>dateA<\/span>))<\/span> return<\/span> -<\/span>1<\/span>;<\/span>\r\n\r\n    return<\/span> 0<\/span>;<\/span>\r\n  });<\/span>\r\n\r\n  \/\/ Paging<\/span>\r\n  const<\/span> {<\/span> postsPerPage<\/span> }<\/span> =<\/span> siteConfig<\/span>;<\/span>\r\n  const<\/span> pageCount<\/span> =<\/span> Math<\/span>.<\/span>ceil<\/span>(<\/span>postsEdges<\/span>.<\/span>length<\/span> \/<\/span> postsPerPage<\/span>);<\/span>\r\n\r\n  [...<\/span>Array<\/span>(<\/span>pageCount<\/span>)].<\/span>forEach<\/span>((<\/span>_val<\/span>,<\/span> pageNum<\/span>)<\/span> =><\/span> {<\/span>\r\n    createPage<\/span>({<\/span>\r\n      path<\/span>:<\/span> pageNum<\/span> ===<\/span> 0<\/span> ?<\/span> `\/`<\/span> :<\/span> `\/<\/span>${<\/span>pageNum<\/span> +<\/span> 1<\/span>}<\/span>\/`<\/span>,<\/span>\r\n      component<\/span>:<\/span> listingPage<\/span>,<\/span>\r\n      context<\/span>:<\/span> {<\/span>\r\n        limit<\/span>:<\/span> postsPerPage<\/span>,<\/span>\r\n        skip<\/span>:<\/span> pageNum<\/span> *<\/span> postsPerPage<\/span>,<\/span>\r\n        pageCount<\/span>,<\/span>\r\n        currentPageNum<\/span>:<\/span> pageNum<\/span> +<\/span> 1<\/span>\r\n      }<\/span>\r\n    });<\/span>\r\n  });<\/span>\r\n\r\n  \/\/ Post page creating<\/span>\r\n  postsEdges<\/span>.<\/span>forEach<\/span>((<\/span>edge<\/span>,<\/span> index<\/span>)<\/span> =><\/span> {<\/span>\r\n    \/\/ Generate a list of tags<\/span>\r\n    if<\/span> (<\/span>edge<\/span>.<\/span>node<\/span>.<\/span>frontmatter<\/span>.<\/span>tags<\/span>)<\/span> {<\/span>\r\n      edge<\/span>.<\/span>node<\/span>.<\/span>frontmatter<\/span>.<\/span>tags<\/span>.<\/span>forEach<\/span>(<\/span>tag<\/span> =><\/span> {<\/span>\r\n        tagSet<\/span>.<\/span>add<\/span>(<\/span>tag<\/span>);<\/span>\r\n      });<\/span>\r\n    }<\/span>\r\n\r\n    \/\/ Generate a list of categories<\/span>\r\n    if<\/span> (<\/span>edge<\/span>.<\/span>node<\/span>.<\/span>frontmatter<\/span>.<\/span>category<\/span>)<\/span> {<\/span>\r\n      categorySet<\/span>.<\/span>add<\/span>(<\/span>edge<\/span>.<\/span>node<\/span>.<\/span>frontmatter<\/span>.<\/span>category<\/span>);<\/span>\r\n    }<\/span>\r\n\r\n    \/\/ Create post pages<\/span>\r\n    const<\/span> nextID<\/span> =<\/span> index<\/span> +<\/span> 1<\/span> <<\/span> postsEdges<\/span>.<\/span>length<\/span> ?<\/span> index<\/span> +<\/span> 1<\/span> :<\/span> 0<\/span>;<\/span>\r\n    const<\/span> prevID<\/span> =<\/span> index<\/span> -<\/span> 1<\/span> >=<\/span> 0<\/span> ?<\/span> index<\/span> -<\/span> 1<\/span> :<\/span> postsEdges<\/span>.<\/span>length<\/span> -<\/span> 1<\/span>;<\/span>\r\n    const<\/span> nextEdge<\/span> =<\/span> postsEdges<\/span>[<\/span>nextID<\/span>];<\/span>\r\n    const<\/span> prevEdge<\/span> =<\/span> postsEdges<\/span>[<\/span>prevID<\/span>];<\/span>\r\n\r\n    createPage<\/span>({<\/span>\r\n      path<\/span>:<\/span> edge<\/span>.<\/span>node<\/span>.<\/span>fields<\/span>.<\/span>slug<\/span>,<\/span>\r\n      component<\/span>:<\/span> postPage<\/span>,<\/span>\r\n      context<\/span>:<\/span> {<\/span>\r\n        slug<\/span>:<\/span> edge<\/span>.<\/span>node<\/span>.<\/span>fields<\/span>.<\/span>slug<\/span>,<\/span>\r\n        nexttitle<\/span>:<\/span> nextEdge<\/span>.<\/span>node<\/span>.<\/span>frontmatter<\/span>.<\/span>title<\/span>,<\/span>\r\n        nextslug<\/span>:<\/span> nextEdge<\/span>.<\/span>node<\/span>.<\/span>fields<\/span>.<\/span>slug<\/span>,<\/span>\r\n        prevtitle<\/span>:<\/span> prevEdge<\/span>.<\/span>node<\/span>.<\/span>frontmatter<\/span>.<\/span>title<\/span>,<\/span>\r\n        prevslug<\/span>:<\/span> prevEdge<\/span>.<\/span>node<\/span>.<\/span>fields<\/span>.<\/span>slug<\/span>\r\n      }<\/span>\r\n    });<\/span>\r\n  });<\/span>\r\n\r\n  \/\/  Create tag pages<\/span>\r\n  tagSet<\/span>.<\/span>forEach<\/span>(<\/span>tag<\/span> =><\/span> {<\/span>\r\n    createPage<\/span>({<\/span>\r\n      path<\/span>:<\/span> `\/tags\/<\/span>${<\/span>_<\/span>.<\/span>kebabCase<\/span>(<\/span>tag<\/span>)}<\/span>\/`<\/span>,<\/span>\r\n      component<\/span>:<\/span> tagPage<\/span>,<\/span>\r\n      context<\/span>:<\/span> {<\/span> tag<\/span> }<\/span>\r\n    });<\/span>\r\n  });<\/span>\r\n\r\n  \/\/ Create category pages<\/span>\r\n  categorySet<\/span>.<\/span>forEach<\/span>(<\/span>category<\/span> =><\/span> {<\/span>\r\n    createPage<\/span>({<\/span>\r\n      path<\/span>:<\/span> `\/categories\/<\/span>${<\/span>_<\/span>.<\/span>kebabCase<\/span>(<\/span>category<\/span>)}<\/span>\/`<\/span>,<\/span>\r\n      component<\/span>:<\/span> categoryPage<\/span>,<\/span>\r\n      context<\/span>:<\/span> {<\/span> category<\/span> }<\/span>\r\n    });<\/span>\r\n  });<\/span>\r\n};<\/span>\r\n\r\n<\/code><\/pre>\n
                import<\/span> React<\/span> from<\/span> \"<\/span>react<\/span>\"<\/span>;<\/span>\r\nimport<\/span> {<\/span> Link<\/span> }<\/span> from<\/span> \"<\/span>gatsby<\/span>\"<\/span>;<\/span>\r\n\r\nclass<\/span> PostListing<\/span> extends<\/span> React<\/span>.<\/span>Component<\/span> {<\/span>\r\n  getPostList<\/span>()<\/span> {<\/span>\r\n    const<\/span> postList<\/span> =<\/span> [];<\/span>\r\n    this<\/span>.<\/span>props<\/span>.<\/span>postEdges<\/span>.<\/span>forEach<\/span>(<\/span>postEdge<\/span> =><\/span> {<\/span>\r\n      postList<\/span>.<\/span>push<\/span>({<\/span>\r\n        path<\/span>:<\/span> postEdge<\/span>.<\/span>node<\/span>.<\/span>fields<\/span>.<\/span>slug<\/span>,<\/span>\r\n        tags<\/span>:<\/span> postEdge<\/span>.<\/span>node<\/span>.<\/span>frontmatter<\/span>.<\/span>tags<\/span>,<\/span>\r\n        cover<\/span>:<\/span> postEdge<\/span>.<\/span>node<\/span>.<\/span>frontmatter<\/span>.<\/span>cover<\/span>,<\/span>\r\n        title<\/span>:<\/span> postEdge<\/span>.<\/span>node<\/span>.<\/span>frontmatter<\/span>.<\/span>title<\/span>,<\/span>\r\n        date<\/span>:<\/span> postEdge<\/span>.<\/span>node<\/span>.<\/span>fields<\/span>.<\/span>date<\/span>,<\/span>\r\n        excerpt<\/span>:<\/span> postEdge<\/span>.<\/span>node<\/span>.<\/span>excerpt<\/span>,<\/span>\r\n        timeToRead<\/span>:<\/span> postEdge<\/span>.<\/span>node<\/span>.<\/span>timeToRead<\/span>\r\n      });<\/span>\r\n    });<\/span>\r\n    return<\/span> postList<\/span>;<\/span>\r\n  }<\/span>\r\n\r\n  render<\/span>()<\/span> {<\/span>\r\n    const<\/span> postList<\/span> =<\/span> this<\/span>.<\/span>getPostList<\/span>();<\/span>\r\n    return<\/span> (<\/span>\r\n      <<\/span>div<\/span>><\/span>\r\n        {<\/span>\/* Your post list here. *\/<\/span>\r\n        postList<\/span>.<\/span>map<\/span>(<\/span>post<\/span> =><\/span> (<\/span>\r\n          <<\/span>Link<\/span> to<\/span>=<\/span>{<\/span>post<\/span>.<\/span>path<\/span>}<\/span> key<\/span>=<\/span>{<\/span>post<\/span>.<\/span>title<\/span>}<\/span>><\/span>\r\n            <<\/span>h1<\/span>><\/span>{<\/span>post<\/span>.<\/span>title<\/span>}<\/span><\/<\/span>h1<\/span>><\/span>\r\n          <\/<\/span>Link<\/span>><\/span>\r\n        ))<\/span>}<\/span>\r\n      <\/<\/span>div<\/span>><\/span>\r\n    );<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n\r\nexport<\/span> default<\/span> PostListing<\/span>;<\/span>\r\n<\/code><\/pre>\n
                import<\/span> React<\/span> from<\/span> \"<\/span>react<\/span>\"<\/span>;<\/span>\r\nimport<\/span> Helmet<\/span> from<\/span> \"<\/span>react-helmet<\/span>\"<\/span>;<\/span>\r\nimport<\/span> {<\/span> graphql<\/span>,<\/span> Link<\/span> }<\/span> from<\/span> \"<\/span>gatsby<\/span>\"<\/span>;<\/span>\r\nimport<\/span> Layout<\/span> from<\/span> \"<\/span>..\/layout<\/span>\"<\/span>;<\/span>\r\nimport<\/span> PostListing<\/span> from<\/span> \"<\/span>..\/components\/PostListing\/PostListing<\/span>\"<\/span>;<\/span>\r\nimport<\/span> SEO<\/span> from<\/span> \"<\/span>..\/components\/SEO\/SEO<\/span>\"<\/span>;<\/span>\r\nimport<\/span> config<\/span> from<\/span> \"<\/span>..\/..\/data\/SiteConfig<\/span>\"<\/span>;<\/span>\r\nimport<\/span> \"<\/span>.\/listing.css<\/span>\"<\/span>;<\/span>\r\n\r\nclass<\/span> Listing<\/span> extends<\/span> React<\/span>.<\/span>Component<\/span> {<\/span>\r\n  renderPaging<\/span>()<\/span> {<\/span>\r\n    const<\/span> {<\/span> currentPageNum<\/span>,<\/span> pageCount<\/span> }<\/span> =<\/span> this<\/span>.<\/span>props<\/span>.<\/span>pageContext<\/span>;<\/span>\r\n    const<\/span> prevPage<\/span> =<\/span> currentPageNum<\/span> -<\/span> 1<\/span> ===<\/span> 1<\/span> ?<\/span> \"<\/span>\/<\/span>\"<\/span> :<\/span> `\/<\/span>${<\/span>currentPageNum<\/span> -<\/span> 1<\/span>}<\/span>\/`<\/span>;<\/span>\r\n    const<\/span> nextPage<\/span> =<\/span> `\/<\/span>${<\/span>currentPageNum<\/span> +<\/span> 1<\/span>}<\/span>\/`<\/span>;<\/span>\r\n    const<\/span> isFirstPage<\/span> =<\/span> currentPageNum<\/span> ===<\/span> 1<\/span>;<\/span>\r\n    const<\/span> isLastPage<\/span> =<\/span> currentPageNum<\/span> ===<\/span> pageCount<\/span>;<\/span>\r\n\r\n    return<\/span> (<\/span>\r\n      <<\/span>div<\/span> className<\/span>=<\/span>\"paging-container\"<\/span>><\/span>\r\n        {<\/span>!<\/span>isFirstPage<\/span> &&<\/span> <<\/span>Link<\/span> to<\/span>=<\/span>{<\/span>prevPage<\/span>}<\/span>><\/span>Previous<\/<\/span>Link<\/span>><\/span>}<\/span>\r\n        {<\/span>[...<\/span>Array<\/span>(<\/span>pageCount<\/span>)].<\/span>map<\/span>((<\/span>_val<\/span>,<\/span> index<\/span>)<\/span> =><\/span> {<\/span>\r\n          const<\/span> pageNum<\/span> =<\/span> index<\/span> +<\/span> 1<\/span>;<\/span>\r\n          return<\/span> (<\/span>\r\n            <<\/span>Link<\/span>\r\n              key<\/span>=<\/span>{<\/span>`listing-page-<\/span>${<\/span>pageNum<\/span>}<\/span>`<\/span>}<\/span>\r\n              to<\/span>=<\/span>{<\/span>pageNum<\/span> ===<\/span> 1<\/span> ?<\/span> \"<\/span>\/<\/span>\"<\/span> :<\/span> `\/<\/span>${<\/span>pageNum<\/span>}<\/span>\/`<\/span>}<\/span>\r\n            ><\/span>\r\n              {<\/span>pageNum<\/span>}<\/span>\r\n            <\/<\/span>Link<\/span>><\/span>\r\n          );<\/span>\r\n        })<\/span>}<\/span>\r\n        {<\/span>!<\/span>isLastPage<\/span> &&<\/span> <<\/span>Link<\/span> to<\/span>=<\/span>{<\/span>nextPage<\/span>}<\/span>><\/span>Next<\/<\/span>Link<\/span>><\/span>}<\/span>\r\n      <\/<\/span>div<\/span>><\/span>\r\n    );<\/span>\r\n  }<\/span>\r\n\r\n  render<\/span>()<\/span> {<\/span>\r\n    const<\/span> postEdges<\/span> =<\/span> this<\/span>.<\/span>props<\/span>.<\/span>data<\/span>.<\/span>allMarkdownRemark<\/span>.<\/span>edges<\/span>;<\/span>\r\n\r\n    return<\/span> (<\/span>\r\n      <<\/span>Layout<\/span>><\/span>\r\n        <<\/span>div<\/span> className<\/span>=<\/span>\"listing-container\"<\/span>><\/span>\r\n          <<\/span>div<\/span> className<\/span>=<\/span>\"posts-container\"<\/span>><\/span>\r\n            <<\/span>Helmet<\/span> title<\/span>=<\/span>{<\/span>config<\/span>.<\/span>siteTitle<\/span>}<\/span> \/><\/span>\r\n            <<\/span>SEO<\/span> \/><\/span>\r\n            <<\/span>PostListing<\/span> postEdges<\/span>=<\/span>{<\/span>postEdges<\/span>}<\/span> \/><\/span>\r\n          <\/<\/span>div<\/span>><\/span>\r\n          {<\/span>this<\/span>.<\/span>renderPaging<\/span>()<\/span>}<\/span>\r\n        <\/<\/span>div<\/span>><\/span>\r\n      <\/<\/span>Layout<\/span>><\/span>\r\n    );<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n\r\nexport<\/span> default<\/span> Listing<\/span>;<\/span>\r\n\r\n\/* eslint no-undef: \"off\" *\/<\/span>\r\nexport<\/span> const<\/span> listingQuery<\/span> =<\/span> graphql<\/span>`\r\n  query ListingQuery($skip: Int!, $limit: Int!) {\r\n    allMarkdownRemark(\r\n      sort: { fields: [fields___date], order: DESC }\r\n      limit: $limit\r\n      skip: $skip\r\n    ) {\r\n      edges {\r\n        node {\r\n          fields {\r\n            slug\r\n            date\r\n          }\r\n          excerpt\r\n          timeToRead\r\n          frontmatter {\r\n            title\r\n            tags\r\n            cover\r\n            date\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n`<\/span>;<\/span>\r\n<\/code><\/pre>\n
                gatsby-node.js (\u76d6\u8328\u6bd4\u8282\u70b9.js)<\/h3>\n
                \u6211\u4e8b\u5148\u5c06\u793a\u4f8b\u4ee3\u7801\u6309\u7167\u5904\u7406\u7684\u5404\u4e2a\u90e8\u5206\u8fdb\u884c\u4e86\u5206\u5272\u3002\u4e00\u822c\u60c5\u51b5\u4e0b\uff0c\u5728\u5f00\u5934\u90e8\u5206\u4f1a\u6309\u7167\u60ef\u4f8b\u5bfc\u5165\u6a21\u5757\u3002<\/p>\n
                const<\/span> path<\/span> =<\/span> require<\/span>(<\/span>\"<\/span>path<\/span>\"<\/span>);<\/span>\r\nconst<\/span> _<\/span> =<\/span> require<\/span>(<\/span>\"<\/span>lodash<\/span>\"<\/span>);<\/span>\r\nconst<\/span> moment<\/span> =<\/span> require<\/span>(<\/span>\"<\/span>moment<\/span>\"<\/span>);<\/span>\r\nconst<\/span> siteConfig<\/span> =<\/span> require<\/span>(<\/span>\"<\/span>.\/data\/SiteConfig<\/span>\"<\/span>);<\/span>\r\n<\/code><\/pre>\n
                exports<\/span>.<\/span>onCreateNode<\/span> =<\/span> ({<\/span> node<\/span>,<\/span> actions<\/span>,<\/span> getNode<\/span> })<\/span> =><\/span> {<\/span>\r\n  const<\/span> {<\/span> createNodeField<\/span> }<\/span> =<\/span> actions<\/span>;<\/span>\r\n  let<\/span> slug<\/span>;<\/span>\r\n  if<\/span> (<\/span>node<\/span>.<\/span>internal<\/span>.<\/span>type<\/span> ===<\/span> \"<\/span>MarkdownRemark<\/span>\"<\/span>)<\/span> {<\/span>\r\n    const<\/span> fileNode<\/span> =<\/span> getNode<\/span>(<\/span>node<\/span>.<\/span>parent<\/span>);<\/span>\r\n    const<\/span> parsedFilePath<\/span> =<\/span> path<\/span>.<\/span>parse<\/span>(<\/span>fileNode<\/span>.<\/span>relativePath<\/span>);<\/span>\r\n    if<\/span> (<\/span>\r\n      Object<\/span>.<\/span>prototype<\/span>.<\/span>hasOwnProperty<\/span>.<\/span>call<\/span>(<\/span>node<\/span>,<\/span> \"<\/span>frontmatter<\/span>\"<\/span>)<\/span> &&<\/span>\r\n      Object<\/span>.<\/span>prototype<\/span>.<\/span>hasOwnProperty<\/span>.<\/span>call<\/span>(<\/span>node<\/span>.<\/span>frontmatter<\/span>,<\/span> \"<\/span>title<\/span>\"<\/span>)<\/span>\r\n    )<\/span> {<\/span>\r\n      slug<\/span> =<\/span> `\/<\/span>${<\/span>_<\/span>.<\/span>kebabCase<\/span>(<\/span>node<\/span>.<\/span>frontmatter<\/span>.<\/span>title<\/span>)}<\/span>`<\/span>;<\/span>\r\n    }<\/span> else<\/span> if<\/span> (<\/span>parsedFilePath<\/span>.<\/span>name<\/span> !==<\/span> \"<\/span>index<\/span>\"<\/span> &&<\/span> parsedFilePath<\/span>.<\/span>dir<\/span> !==<\/span> \"\"<\/span>)<\/span> {<\/span>\r\n      slug<\/span> =<\/span> `\/<\/span>${<\/span>parsedFilePath<\/span>.<\/span>dir<\/span>}<\/span>\/<\/span>${<\/span>parsedFilePath<\/span>.<\/span>name<\/span>}<\/span>\/`<\/span>;<\/span>\r\n    }<\/span> else<\/span> if<\/span> (<\/span>parsedFilePath<\/span>.<\/span>dir<\/span> ===<\/span> \"\"<\/span>)<\/span> {<\/span>\r\n      slug<\/span> =<\/span> `\/<\/span>${<\/span>parsedFilePath<\/span>.<\/span>name<\/span>}<\/span>\/`<\/span>;<\/span>\r\n    }<\/span> else<\/span> {<\/span>\r\n      slug<\/span> =<\/span> `\/<\/span>${<\/span>parsedFilePath<\/span>.<\/span>dir<\/span>}<\/span>\/`<\/span>;<\/span>\r\n    }<\/span>\r\n\r\n    if<\/span> (<\/span>Object<\/span>.<\/span>prototype<\/span>.<\/span>hasOwnProperty<\/span>.<\/span>call<\/span>(<\/span>node<\/span>,<\/span> \"<\/span>frontmatter<\/span>\"<\/span>))<\/span> {<\/span>\r\n      if<\/span> (<\/span>Object<\/span>.<\/span>prototype<\/span>.<\/span>hasOwnProperty<\/span>.<\/span>call<\/span>(<\/span>node<\/span>.<\/span>frontmatter<\/span>,<\/span> \"<\/span>slug<\/span>\"<\/span>))<\/span>\r\n        slug<\/span> =<\/span> `\/<\/span>${<\/span>_<\/span>.<\/span>kebabCase<\/span>(<\/span>node<\/span>.<\/span>frontmatter<\/span>.<\/span>slug<\/span>)}<\/span>`<\/span>;<\/span>\r\n      if<\/span> (<\/span>Object<\/span>.<\/span>prototype<\/span>.<\/span>hasOwnProperty<\/span>.<\/span>call<\/span>(<\/span>node<\/span>.<\/span>frontmatter<\/span>,<\/span> \"<\/span>date<\/span>\"<\/span>))<\/span> {<\/span>\r\n        const<\/span> date<\/span> =<\/span> moment<\/span>(<\/span>node<\/span>.<\/span>frontmatter<\/span>.<\/span>date<\/span>,<\/span> siteConfig<\/span>.<\/span>dateFromFormat<\/span>);<\/span>\r\n        if<\/span> (<\/span>!<\/span>date<\/span>.<\/span>isValid<\/span>)<\/span>\r\n          console<\/span>.<\/span>warn<\/span>(<\/span>`WARNING: Invalid date.`<\/span>,<\/span> node<\/span>.<\/span>frontmatter<\/span>);<\/span>\r\n\r\n        createNodeField<\/span>({<\/span> node<\/span>,<\/span> name<\/span>:<\/span> \"<\/span>date<\/span>\"<\/span>,<\/span> value<\/span>:<\/span> date<\/span>.<\/span>toISOString<\/span>()<\/span> });<\/span>\r\n      }<\/span>\r\n    }<\/span>\r\n    createNodeField<\/span>({<\/span> node<\/span>,<\/span> name<\/span>:<\/span> \"<\/span>slug<\/span>\"<\/span>,<\/span> value<\/span>:<\/span> slug<\/span> });<\/span>\r\n  }<\/span>\r\n};<\/span>\r\n<\/code><\/pre>\n
                exports<\/span>.<\/span>createPages<\/span> =<\/span> async<\/span> ({<\/span> graphql<\/span>,<\/span> actions<\/span> })<\/span> =><\/span> {<\/span>\r\n  const<\/span> {<\/span> createPage<\/span> }<\/span> =<\/span> actions<\/span>;<\/span>\r\n  const<\/span> postPage<\/span> =<\/span> path<\/span>.<\/span>resolve<\/span>(<\/span>\"<\/span>src\/templates\/post.jsx<\/span>\"<\/span>);<\/span>\r\n  const<\/span> tagPage<\/span> =<\/span> path<\/span>.<\/span>resolve<\/span>(<\/span>\"<\/span>src\/templates\/tag.jsx<\/span>\"<\/span>);<\/span>\r\n  const<\/span> categoryPage<\/span> =<\/span> path<\/span>.<\/span>resolve<\/span>(<\/span>\"<\/span>src\/templates\/category.jsx<\/span>\"<\/span>);<\/span>\r\n  const<\/span> listingPage<\/span> =<\/span> path<\/span>.<\/span>resolve<\/span>(<\/span>\"<\/span>.\/src\/templates\/listing.jsx<\/span>\"<\/span>);<\/span>\r\n<\/code><\/pre>\n
                  \/\/ Get a full list of markdown posts<\/span>\r\n  const<\/span> markdownQueryResult<\/span> =<\/span> await<\/span> graphql<\/span>(<\/span>`\r\n    {\r\n      allMarkdownRemark {\r\n        edges {\r\n          node {\r\n            fields {\r\n              slug\r\n            }\r\n            frontmatter {\r\n              title\r\n              tags\r\n              category\r\n              date\r\n            }\r\n          }\r\n        }\r\n      }\r\n    }\r\n  `<\/span>);<\/span>\r\n<\/code><\/pre>\n
                  if<\/span> (<\/span>markdownQueryResult<\/span>.<\/span>errors<\/span>)<\/span> {<\/span>\r\n    console<\/span>.<\/span>error<\/span>(<\/span>markdownQueryResult<\/span>.<\/span>errors<\/span>);<\/span>\r\n    throw<\/span> markdownQueryResult<\/span>.<\/span>errors<\/span>;<\/span>\r\n  }<\/span>\r\n\r\n  const<\/span> tagSet<\/span> =<\/span> new<\/span> Set<\/span>();<\/span>\r\n  const<\/span> categorySet<\/span> =<\/span> new<\/span> Set<\/span>();<\/span>\r\n\r\n  const<\/span> postsEdges<\/span> =<\/span> markdownQueryResult<\/span>.<\/span>data<\/span>.<\/span>allMarkdownRemark<\/span>.<\/span>edges<\/span>;<\/span>\r\n<\/code><\/pre>\n
                  \/\/ Sort posts<\/span>\r\n  postsEdges<\/span>.<\/span>sort<\/span>((<\/span>postA<\/span>,<\/span> postB<\/span>)<\/span> =><\/span> {<\/span>\r\n    const<\/span> dateA<\/span> =<\/span> moment<\/span>(<\/span>\r\n      postA<\/span>.<\/span>node<\/span>.<\/span>frontmatter<\/span>.<\/span>date<\/span>,<\/span>\r\n      siteConfig<\/span>.<\/span>dateFromFormat<\/span>\r\n    );<\/span>\r\n\r\n    const<\/span> dateB<\/span> =<\/span> moment<\/span>(<\/span>\r\n      postB<\/span>.<\/span>node<\/span>.<\/span>frontmatter<\/span>.<\/span>date<\/span>,<\/span>\r\n      siteConfig<\/span>.<\/span>dateFromFormat<\/span>\r\n    );<\/span>\r\n\r\n    if<\/span> (<\/span>dateA<\/span>.<\/span>isBefore<\/span>(<\/span>dateB<\/span>))<\/span> return<\/span> 1<\/span>;<\/span>\r\n    if<\/span> (<\/span>dateB<\/span>.<\/span>isBefore<\/span>(<\/span>dateA<\/span>))<\/span> return<\/span> -<\/span>1<\/span>;<\/span>\r\n\r\n    return<\/span> 0<\/span>;<\/span>\r\n  });<\/span>\r\n<\/code><\/pre>\n
                  \/\/ Paging<\/span>\r\n  const<\/span> {<\/span> postsPerPage<\/span> }<\/span> =<\/span> siteConfig<\/span>;<\/span>\r\n  const<\/span> pageCount<\/span> =<\/span> Math<\/span>.<\/span>ceil<\/span>(<\/span>postsEdges<\/span>.<\/span>length<\/span> \/<\/span> postsPerPage<\/span>);<\/span>\r\n\r\n  [...<\/span>Array<\/span>(<\/span>pageCount<\/span>)].<\/span>forEach<\/span>((<\/span>_val<\/span>,<\/span> pageNum<\/span>)<\/span> =><\/span> {<\/span>\r\n    createPage<\/span>({<\/span>\r\n      path<\/span>:<\/span> pageNum<\/span> ===<\/span> 0<\/span> ?<\/span> `\/`<\/span> :<\/span> `\/<\/span>${<\/span>pageNum<\/span> +<\/span> 1<\/span>}<\/span>\/`<\/span>,<\/span>\r\n      component<\/span>:<\/span> listingPage<\/span>,<\/span>\r\n      context<\/span>:<\/span> {<\/span>\r\n        limit<\/span>:<\/span> postsPerPage<\/span>,<\/span>\r\n        skip<\/span>:<\/span> pageNum<\/span> *<\/span> postsPerPage<\/span>,<\/span>\r\n        pageCount<\/span>,<\/span>\r\n        currentPageNum<\/span>:<\/span> pageNum<\/span> +<\/span> 1<\/span>\r\n      }<\/span>\r\n    });<\/span>\r\n  });<\/span>\r\n<\/code><\/pre>\n
                  \/\/ Post page creating<\/span>\r\n  postsEdges<\/span>.<\/span>forEach<\/span>((<\/span>edge<\/span>,<\/span> index<\/span>)<\/span> =><\/span> {<\/span>\r\n    \/\/ Generate a list of tags<\/span>\r\n    if<\/span> (<\/span>edge<\/span>.<\/span>node<\/span>.<\/span>frontmatter<\/span>.<\/span>tags<\/span>)<\/span> {<\/span>\r\n      edge<\/span>.<\/span>node<\/span>.<\/span>frontmatter<\/span>.<\/span>tags<\/span>.<\/span>forEach<\/span>(<\/span>tag<\/span> =><\/span> {<\/span>\r\n        tagSet<\/span>.<\/span>add<\/span>(<\/span>tag<\/span>);<\/span>\r\n      });<\/span>\r\n    }<\/span>\r\n\r\n    \/\/ Generate a list of categories<\/span>\r\n    if<\/span> (<\/span>edge<\/span>.<\/span>node<\/span>.<\/span>frontmatter<\/span>.<\/span>category<\/span>)<\/span> {<\/span>\r\n      categorySet<\/span>.<\/span>add<\/span>(<\/span>edge<\/span>.<\/span>node<\/span>.<\/span>frontmatter<\/span>.<\/span>category<\/span>);<\/span>\r\n    }<\/span>\r\n\r\n    \/\/ Create post pages<\/span>\r\n    const<\/span> nextID<\/span> =<\/span> index<\/span> +<\/span> 1<\/span> <<\/span> postsEdges<\/span>.<\/span>length<\/span> ?<\/span> index<\/span> +<\/span> 1<\/span> :<\/span> 0<\/span>;<\/span>\r\n    const<\/span> prevID<\/span> =<\/span> index<\/span> -<\/span> 1<\/span> >=<\/span> 0<\/span> ?<\/span> index<\/span> -<\/span> 1<\/span> :<\/span> postsEdges<\/span>.<\/span>length<\/span> -<\/span> 1<\/span>;<\/span>\r\n    const<\/span> nextEdge<\/span> =<\/span> postsEdges<\/span>[<\/span>nextID<\/span>];<\/span>\r\n    const<\/span> prevEdge<\/span> =<\/span> postsEdges<\/span>[<\/span>prevID<\/span>];<\/span>\r\n\r\n    createPage<\/span>({<\/span>\r\n      path<\/span>:<\/span> edge<\/span>.<\/span>node<\/span>.<\/span>fields<\/span>.<\/span>slug<\/span>,<\/span>\r\n      component<\/span>:<\/span> postPage<\/span>,<\/span>\r\n      context<\/span>:<\/span> {<\/span>\r\n        slug<\/span>:<\/span> edge<\/span>.<\/span>node<\/span>.<\/span>fields<\/span>.<\/span>slug<\/span>,<\/span>\r\n        nexttitle<\/span>:<\/span> nextEdge<\/span>.<\/span>node<\/span>.<\/span>frontmatter<\/span>.<\/span>title<\/span>,<\/span>\r\n        nextslug<\/span>:<\/span> nextEdge<\/span>.<\/span>node<\/span>.<\/span>fields<\/span>.<\/span>slug<\/span>,<\/span>\r\n        prevtitle<\/span>:<\/span> prevEdge<\/span>.<\/span>node<\/span>.<\/span>frontmatter<\/span>.<\/span>title<\/span>,<\/span>\r\n        prevslug<\/span>:<\/span> prevEdge<\/span>.<\/span>node<\/span>.<\/span>fields<\/span>.<\/span>slug<\/span>\r\n      }<\/span>\r\n    });<\/span>\r\n  });<\/span>\r\n<\/code><\/pre>\n
                  \/\/  Create tag pages<\/span>\r\n  tagSet<\/span>.<\/span>forEach<\/span>(<\/span>tag<\/span> =><\/span> {<\/span>\r\n    createPage<\/span>({<\/span>\r\n      path<\/span>:<\/span> `\/tags\/<\/span>${<\/span>_<\/span>.<\/span>kebabCase<\/span>(<\/span>tag<\/span>)}<\/span>\/`<\/span>,<\/span>\r\n      component<\/span>:<\/span> tagPage<\/span>,<\/span>\r\n      context<\/span>:<\/span> {<\/span> tag<\/span> }<\/span>\r\n    });<\/span>\r\n  });<\/span>\r\n<\/code><\/pre>\n
                  \/\/ Create category pages<\/span>\r\n  categorySet<\/span>.<\/span>forEach<\/span>(<\/span>category<\/span> =><\/span> {<\/span>\r\n    createPage<\/span>({<\/span>\r\n      path<\/span>:<\/span> `\/categories\/<\/span>${<\/span>_<\/span>.<\/span>kebabCase<\/span>(<\/span>category<\/span>)}<\/span>\/`<\/span>,<\/span>\r\n      component<\/span>:<\/span> categoryPage<\/span>,<\/span>\r\n      context<\/span>:<\/span> {<\/span> category<\/span> }<\/span>\r\n    });<\/span>\r\n  });<\/span>\r\n};<\/span>\r\n<\/code><\/pre>\n
                \u4e00\u65e6\u5728\u8fd9\u91cc\u89e3\u8bfb\u6682\u505c\u3002<\/p>\n
                \u4e0b\u4e00\u6b65\uff0c\u5c1d\u8bd5\u5728Next.js\u7684API\u8def\u7531\u4e2d\u4f7f\u7528GraphQL\u8fdb\u884c\u8fd0\u884c\u3002<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"
                \u524d\u4e00\u7bc7\u6587\u7ae0\uff1a\u3010GraphQL\u5165\u95e8\u3011\u5b66\u4e60\u7b14\u8bb0\uff0c\u5b9e\u73b0\u5728 Next.js \u5236\u4f5c\u7684\u535a\u5ba2\u4e2d\u83b7\u53d6\u6587\u7ae0\u4fe1\u606f\u7684API\u3002 \u6700\u8fd1\u4e3a […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-48155","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"\n\u4eceGatsby.js\uff08Next.js\uff09\u7684\u4e3b\u9898\u5236\u4f5c\u4e2d\u5b66\u4e60\u3010React.js \u00d7 GraphQL\u3011\u5728\u535a\u5ba2\u7cfb\u7edf\u4e2d\u83b7\u53d6\u53d1\u5e03\u6587\u7ae0\u4fe1\u606f\u7684\u65b9\u6cd5 - Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/zh\/blog\/\u4ecegatsby-js\uff08next-js\uff09\u7684\u4e3b\u9898\u5236\u4f5c\u4e2d\u5b66\u4e60\u3010react-js-x-graphql\u3011\u5728\u535a\u5ba2\u7cfb\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u4eceGatsby.js\uff08Next.js\uff09\u7684\u4e3b\u9898\u5236\u4f5c\u4e2d\u5b66\u4e60\u3010React.js \u00d7 GraphQL\u3011\u5728\u535a\u5ba2\u7cfb\u7edf\u4e2d\u83b7\u53d6\u53d1\u5e03\u6587\u7ae0\u4fe1\u606f\u7684\u65b9\u6cd5\" \/>\n<meta property=\"og:description\" content=\"\u524d\u4e00\u7bc7\u6587\u7ae0\uff1a\u3010GraphQL\u5165\u95e8\u3011\u5b66\u4e60\u7b14\u8bb0\uff0c\u5b9e\u73b0\u5728 Next.js \u5236\u4f5c\u7684\u535a\u5ba2\u4e2d\u83b7\u53d6\u6587\u7ae0\u4fe1\u606f\u7684API\u3002 \u6700\u8fd1\u4e3a […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/zh\/blog\/\u4ecegatsby-js\uff08next-js\uff09\u7684\u4e3b\u9898\u5236\u4f5c\u4e2d\u5b66\u4e60\u3010react-js-x-graphql\u3011\u5728\u535a\u5ba2\u7cfb\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:published_time\" content=\"2023-12-27T14:06:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-03T16:55:56+00:00\" \/>\n<meta name=\"author\" content=\"\u97f5, \u79d1\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u97f5, \u79d1\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bb%8egatsby-js%ef%bc%88next-js%ef%bc%89%e7%9a%84%e4%b8%bb%e9%a2%98%e5%88%b6%e4%bd%9c%e4%b8%ad%e5%ad%a6%e4%b9%a0%e3%80%90react-js-x-graphql%e3%80%91%e5%9c%a8%e5%8d%9a%e5%ae%a2%e7%b3%bb\/\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bb%8egatsby-js%ef%bc%88next-js%ef%bc%89%e7%9a%84%e4%b8%bb%e9%a2%98%e5%88%b6%e4%bd%9c%e4%b8%ad%e5%ad%a6%e4%b9%a0%e3%80%90react-js-x-graphql%e3%80%91%e5%9c%a8%e5%8d%9a%e5%ae%a2%e7%b3%bb\/\",\"name\":\"\u4eceGatsby.js\uff08Next.js\uff09\u7684\u4e3b\u9898\u5236\u4f5c\u4e2d\u5b66\u4e60\u3010React.js \u00d7 GraphQL\u3011\u5728\u535a\u5ba2\u7cfb\u7edf\u4e2d\u83b7\u53d6\u53d1\u5e03\u6587\u7ae0\u4fe1\u606f\u7684\u65b9\u6cd5 - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\"},\"datePublished\":\"2023-12-27T14:06:36+00:00\",\"dateModified\":\"2024-05-03T16:55:56+00:00\",\"author\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/6530331a63adef3b3443a1fab53a0e6e\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bb%8egatsby-js%ef%bc%88next-js%ef%bc%89%e7%9a%84%e4%b8%bb%e9%a2%98%e5%88%b6%e4%bd%9c%e4%b8%ad%e5%ad%a6%e4%b9%a0%e3%80%90react-js-x-graphql%e3%80%91%e5%9c%a8%e5%8d%9a%e5%ae%a2%e7%b3%bb\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bb%8egatsby-js%ef%bc%88next-js%ef%bc%89%e7%9a%84%e4%b8%bb%e9%a2%98%e5%88%b6%e4%bd%9c%e4%b8%ad%e5%ad%a6%e4%b9%a0%e3%80%90react-js-x-graphql%e3%80%91%e5%9c%a8%e5%8d%9a%e5%ae%a2%e7%b3%bb\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bb%8egatsby-js%ef%bc%88next-js%ef%bc%89%e7%9a%84%e4%b8%bb%e9%a2%98%e5%88%b6%e4%bd%9c%e4%b8%ad%e5%ad%a6%e4%b9%a0%e3%80%90react-js-x-graphql%e3%80%91%e5%9c%a8%e5%8d%9a%e5%ae%a2%e7%b3%bb\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.silicloud.com\/zh\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u4eceGatsby.js\uff08Next.js\uff09\u7684\u4e3b\u9898\u5236\u4f5c\u4e2d\u5b66\u4e60\u3010React.js \u00d7 GraphQL\u3011\u5728\u535a\u5ba2\u7cfb\u7edf\u4e2d\u83b7\u53d6\u53d1\u5e03\u6587\u7ae0\u4fe1\u606f\u7684\u65b9\u6cd5\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/\",\"name\":\"Blog - Silicon Cloud\",\"description\":\"\",\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/6530331a63adef3b3443a1fab53a0e6e\",\"name\":\"\u97f5, \u79d1\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/429ccb39b3fff5188bc17986222cfb0936cbadb8cc933cff04ab5ca01bd30a08?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/429ccb39b3fff5188bc17986222cfb0936cbadb8cc933cff04ab5ca01bd30a08?s=96&d=mm&r=g\",\"caption\":\"\u97f5, \u79d1\"},\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/author\/yunke\/\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bb%8egatsby-js%ef%bc%88next-js%ef%bc%89%e7%9a%84%e4%b8%bb%e9%a2%98%e5%88%b6%e4%bd%9c%e4%b8%ad%e5%ad%a6%e4%b9%a0%e3%80%90react-js-x-graphql%e3%80%91%e5%9c%a8%e5%8d%9a%e5%ae%a2%e7%b3%bb\/#local-main-organization-logo\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Blog - Silicon Cloud\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u4eceGatsby.js\uff08Next.js\uff09\u7684\u4e3b\u9898\u5236\u4f5c\u4e2d\u5b66\u4e60\u3010React.js \u00d7 GraphQL\u3011\u5728\u535a\u5ba2\u7cfb\u7edf\u4e2d\u83b7\u53d6\u53d1\u5e03\u6587\u7ae0\u4fe1\u606f\u7684\u65b9\u6cd5 - Blog - Silicon Cloud","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/zh\/blog\/\u4ecegatsby-js\uff08next-js\uff09\u7684\u4e3b\u9898\u5236\u4f5c\u4e2d\u5b66\u4e60\u3010react-js-x-graphql\u3011\u5728\u535a\u5ba2\u7cfb\/","og_locale":"zh_CN","og_type":"article","og_title":"\u4eceGatsby.js\uff08Next.js\uff09\u7684\u4e3b\u9898\u5236\u4f5c\u4e2d\u5b66\u4e60\u3010React.js \u00d7 GraphQL\u3011\u5728\u535a\u5ba2\u7cfb\u7edf\u4e2d\u83b7\u53d6\u53d1\u5e03\u6587\u7ae0\u4fe1\u606f\u7684\u65b9\u6cd5","og_description":"\u524d\u4e00\u7bc7\u6587\u7ae0\uff1a\u3010GraphQL\u5165\u95e8\u3011\u5b66\u4e60\u7b14\u8bb0\uff0c\u5b9e\u73b0\u5728 Next.js \u5236\u4f5c\u7684\u535a\u5ba2\u4e2d\u83b7\u53d6\u6587\u7ae0\u4fe1\u606f\u7684API\u3002 \u6700\u8fd1\u4e3a […]","og_url":"https:\/\/www.silicloud.com\/zh\/blog\/\u4ecegatsby-js\uff08next-js\uff09\u7684\u4e3b\u9898\u5236\u4f5c\u4e2d\u5b66\u4e60\u3010react-js-x-graphql\u3011\u5728\u535a\u5ba2\u7cfb\/","og_site_name":"Blog - Silicon Cloud","article_published_time":"2023-12-27T14:06:36+00:00","article_modified_time":"2024-05-03T16:55:56+00:00","author":"\u97f5, \u79d1","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"\u97f5, \u79d1","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"10 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bb%8egatsby-js%ef%bc%88next-js%ef%bc%89%e7%9a%84%e4%b8%bb%e9%a2%98%e5%88%b6%e4%bd%9c%e4%b8%ad%e5%ad%a6%e4%b9%a0%e3%80%90react-js-x-graphql%e3%80%91%e5%9c%a8%e5%8d%9a%e5%ae%a2%e7%b3%bb\/","url":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bb%8egatsby-js%ef%bc%88next-js%ef%bc%89%e7%9a%84%e4%b8%bb%e9%a2%98%e5%88%b6%e4%bd%9c%e4%b8%ad%e5%ad%a6%e4%b9%a0%e3%80%90react-js-x-graphql%e3%80%91%e5%9c%a8%e5%8d%9a%e5%ae%a2%e7%b3%bb\/","name":"\u4eceGatsby.js\uff08Next.js\uff09\u7684\u4e3b\u9898\u5236\u4f5c\u4e2d\u5b66\u4e60\u3010React.js \u00d7 GraphQL\u3011\u5728\u535a\u5ba2\u7cfb\u7edf\u4e2d\u83b7\u53d6\u53d1\u5e03\u6587\u7ae0\u4fe1\u606f\u7684\u65b9\u6cd5 - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website"},"datePublished":"2023-12-27T14:06:36+00:00","dateModified":"2024-05-03T16:55:56+00:00","author":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/6530331a63adef3b3443a1fab53a0e6e"},"breadcrumb":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bb%8egatsby-js%ef%bc%88next-js%ef%bc%89%e7%9a%84%e4%b8%bb%e9%a2%98%e5%88%b6%e4%bd%9c%e4%b8%ad%e5%ad%a6%e4%b9%a0%e3%80%90react-js-x-graphql%e3%80%91%e5%9c%a8%e5%8d%9a%e5%ae%a2%e7%b3%bb\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/zh\/blog\/%e4%bb%8egatsby-js%ef%bc%88next-js%ef%bc%89%e7%9a%84%e4%b8%bb%e9%a2%98%e5%88%b6%e4%bd%9c%e4%b8%ad%e5%ad%a6%e4%b9%a0%e3%80%90react-js-x-graphql%e3%80%91%e5%9c%a8%e5%8d%9a%e5%ae%a2%e7%b3%bb\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bb%8egatsby-js%ef%bc%88next-js%ef%bc%89%e7%9a%84%e4%b8%bb%e9%a2%98%e5%88%b6%e4%bd%9c%e4%b8%ad%e5%ad%a6%e4%b9%a0%e3%80%90react-js-x-graphql%e3%80%91%e5%9c%a8%e5%8d%9a%e5%ae%a2%e7%b3%bb\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.silicloud.com\/zh\/blog\/"},{"@type":"ListItem","position":2,"name":"\u4eceGatsby.js\uff08Next.js\uff09\u7684\u4e3b\u9898\u5236\u4f5c\u4e2d\u5b66\u4e60\u3010React.js \u00d7 GraphQL\u3011\u5728\u535a\u5ba2\u7cfb\u7edf\u4e2d\u83b7\u53d6\u53d1\u5e03\u6587\u7ae0\u4fe1\u606f\u7684\u65b9\u6cd5"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website","url":"https:\/\/www.silicloud.com\/zh\/blog\/","name":"Blog - Silicon Cloud","description":"","inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/6530331a63adef3b3443a1fab53a0e6e","name":"\u97f5, \u79d1","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/429ccb39b3fff5188bc17986222cfb0936cbadb8cc933cff04ab5ca01bd30a08?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/429ccb39b3fff5188bc17986222cfb0936cbadb8cc933cff04ab5ca01bd30a08?s=96&d=mm&r=g","caption":"\u97f5, \u79d1"},"url":"https:\/\/www.silicloud.com\/zh\/blog\/author\/yunke\/"},{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bb%8egatsby-js%ef%bc%88next-js%ef%bc%89%e7%9a%84%e4%b8%bb%e9%a2%98%e5%88%b6%e4%bd%9c%e4%b8%ad%e5%ad%a6%e4%b9%a0%e3%80%90react-js-x-graphql%e3%80%91%e5%9c%a8%e5%8d%9a%e5%ae%a2%e7%b3%bb\/#local-main-organization-logo","url":"","contentUrl":"","caption":"Blog - Silicon Cloud"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/48155","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/comments?post=48155"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/48155\/revisions"}],"predecessor-version":[{"id":95142,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/48155\/revisions\/95142"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/media?parent=48155"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/categories?post=48155"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/tags?post=48155"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}