{"id":48030,"date":"2023-09-10T20:50:35","date_gmt":"2023-05-15T06:16:19","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/%e9%80%9a%e8%bf%87%e9%a6%96%e6%ac%a1%e7%9a%84%e4%b8%ad%e7%bb%a7%e8%bf%9e%e6%8e%a5%e5%ae%9e%e7%8e%b0%e7%9a%84%e9%a1%b5%e9%9d%a2%e5%88%86%e9%a1%b5%e5%8a%9f%e8%83%bd%e3%80%82\/"},"modified":"2024-05-03T23:06:40","modified_gmt":"2024-05-03T15:06:40","slug":"%e9%80%9a%e8%bf%87%e9%a6%96%e6%ac%a1%e7%9a%84%e4%b8%ad%e7%bb%a7%e8%bf%9e%e6%8e%a5%e5%ae%9e%e7%8e%b0%e7%9a%84%e9%a1%b5%e9%9d%a2%e5%88%86%e9%a1%b5%e5%8a%9f%e8%83%bd%e3%80%82","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/%e9%80%9a%e8%bf%87%e9%a6%96%e6%ac%a1%e7%9a%84%e4%b8%ad%e7%bb%a7%e8%bf%9e%e6%8e%a5%e5%ae%9e%e7%8e%b0%e7%9a%84%e9%a1%b5%e9%9d%a2%e5%88%86%e9%a1%b5%e5%8a%9f%e8%83%bd%e3%80%82\/","title":{"rendered":"\u901a\u8fc7\u9996\u6b21\u7684\u4e2d\u7ee7\u8fde\u63a5\u5b9e\u73b0\u7684\u9875\u9762\u5206\u9875\u529f\u80fd"},"content":{"rendered":"

\u6211\u4e4b\u524d\u5728\u521d\u6b21\u5b9e\u73b0\u9875\u9762\u5206\u9875\u65f6\u4f7f\u7528\u4e86Relay Connection\u3002\u7531\u4e8e\u5b9e\u65bd\u8981\u6c42\u7684\u9650\u5236\uff0c\u867d\u7136\u6ca1\u6709\u5c06\u5176\u4f18\u52bf\u53d1\u6325\u5230\u6700\u5927\uff0c\u4f46\u6211\u4e2a\u4eba\u5b66\u4f1a\u4e86\u57fa\u4e8e\u6e38\u6807\u7684\u5206\u9875\u601d\u60f3\u4ee5\u53caConnection\u7684\u89c4\u8303\u7b49\u65b9\u9762\u7684\u5185\u5bb9\u3002\u6211\u5e0c\u671b\u80fd\u5c06\u8fd9\u4e9b\u5b66\u4e60\u603b\u7ed3\u548c\u5b9e\u9645\u5b9e\u73b0\u7684\u601d\u8def\u4e00\u8d77\u5206\u4eab\u51fa\u6765\u3002<\/p>\n

\u524d\u9762\u6240\u8ff0\u7684\u6761\u4ef6<\/h2>\n

\u9875\u9762\u5bfc\u822a\u7684\u5b9e\u73b0\u65b9\u5f0f<\/h3>\n

\u5728\u5b9e\u65bd\u5206\u9875\u65f6\uff0c\u6709\u51e0\u79cd\u65b9\u6cd5\u53ef\u4ee5\u9009\u62e9\uff0c\u5176\u4e2d\u6700\u5e38\u89c1\u7684\u662f\u57fa\u4e8e\u504f\u79fb\u91cf\u548c\u57fa\u4e8e\u6e38\u6807\u7684\u65b9\u6cd5\u3002<\/p>\n

\u7531\u4e8e\u5b83\u4eec\u5404\u81ea\u64c5\u957f\u4e0d\u540c\u7684\u4e8b\u60c5\uff0c\u56e0\u6b64\u9700\u8981\u6839\u636e\u4e0d\u540c\u7684\u60c5\u51b5\u9009\u62e9\u5408\u9002\u7684\u65b9\u6cd5\u3002<\/p>\n

\u504f\u79fb\u57fa\u7840\u5206\u9875 (offset-based pagination)<\/h4>\n

\u8fd9\u662f\u4f7f\u7528SQL\u7684OFFSET\/LIMIT\u5b50\u53e5\u8fdb\u884c\u5206\u9875\u7684\u65b9\u6cd5\u3002
\n\u4ece\u6570\u636e\u5f00\u59cb\u8ba1\u6570\uff0c\u8df3\u8fc7\u7531\u504f\u79fb\u91cf\u6307\u5b9a\u7684\u6570\u76ee\uff0c\u7136\u540e\u4ece\u4e0b\u4e00\u4e2a\u5143\u7d20\u5f00\u59cb\uff0c\u6309\u7167\u7531\u9650\u5236\u6570\u91cf\u6307\u5b9a\u7684\u6570\u76ee\u83b7\u53d6\u6570\u636e\u3002<\/p>\n

\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8<\/div>\n

\u4f5c\u4e3a\u4e00\u4e2a\u4f8b\u5b50\uff0c\u6211\u4eec\u53ef\u4ee5\u5728 Relay \u7684 GitHub \u4e0a\u67e5\u770b\u4e00\u4e2a pull request \u7684\u4e24\u9875 URL\u3002
\n\u5728\u4e00\u4e2a\u4ee5\u9875\u9762\u7f16\u53f7\u6392\u5217\u7684\u7528\u6237\u754c\u9762\u4e0a\uff0c\u6839\u636e\u9875\u9762\u7f16\u53f7\uff0cpage \u67e5\u8be2\u6240\u4f7f\u7528\u7684\u6570\u5b57\u4f1a\u53d1\u751f\u53d8\u5316\u3002<\/p>\n

\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8<\/div>\n

\u5728\u7b2c2\u9875\u4e2d\uff0c\u53ef\u4ee5\u770b\u5230\u6307\u5b9a\u4e86\u4e00\u4e2a\u540d\u4e3a?page=2\u7684\u67e5\u8be2\u3002<\/p>\n

https:\/\/github.com\/facebook\/relay\/pulls?page=2&q=is%3Apr+is%3Aopen\r\n<\/code><\/pre>\n
\u4e00\u822c\u6765\u8bf4\uff0c\u5f53\u9700\u8981\u6307\u5b9a\u9875\u9762\u53f7\u4ee5\u4fbf\u8df3\u8f6c\u5230\u4efb\u610f\u9875\u9762\u65f6\uff0c\u901a\u5e38\u4f1a\u4f7f\u7528\u57fa\u4e8e\u504f\u79fb\u91cf\u7684\u5206\u9875\u65b9\u6cd5\u3002\u7136\u800c\uff0c\u4e0e\u57fa\u4e8e\u6e38\u6807\u7684\u65b9\u6cd5\u76f8\u6bd4\uff0c\u8fd9\u79cd\u5b9e\u73b0\u76f8\u5bf9\u7b80\u5355\uff0c\u4f46\u540c\u65f6\u4e5f\u9700\u8981\u8ba1\u7b97\u5230\u8fbe\u6307\u5b9a\u9875\u9762\u4e4b\u524d\u7684\u6240\u6709\u884c\u6570\uff0c\u56e0\u6b64\u504f\u79fb\u91cf\u8d8a\u5927\uff0c\u53ef\u80fd\u4f1a\u5bf9\u6570\u636e\u901a\u4fe1\u7684\u6027\u80fd\u9020\u6210\u62c5\u5fe7\u3002<\/p>\n
\u53e6\u5916\uff0c\u7531\u4e8e\u5728\u6570\u636e\u66f4\u65b0\u65f6\u53ef\u80fd\u4f1a\u51fa\u73b0\u91cd\u590d\u6216\u7f3a\u5931\u7684\u60c5\u51b5\uff0c\u5982\u679c\u9891\u7e41\u8fdb\u884c\u6570\u636e\u66f4\u65b0\uff0c\u9700\u8981\u7a0d\u5fae\u6ce8\u610f\u4e00\u4e0b\u3002<\/p>\n
\u6211\u4eec\u6765\u8003\u8651\u4e00\u4e0b\u5728\u663e\u793a\u7b2c\u4e00\u9875\u65f6\uff0c\u6570\u636e\u7684\u5f00\u5934\u88ab\u6dfb\u52a0\u4e86\u8fdb\u53bb\u7684\u60c5\u51b5\u3002<\/p>\n
\u5f53\u6211\u4eec\u8f6c\u5230\u7b2c\u4e8c\u9875\u65f6\uff0c\u4e4b\u524d\u5728\u7b2c\u4e00\u9875\u6700\u540e\u663e\u793a\u7684\u6570\u636e\u5c06\u4f1a\u51fa\u73b0\u5728\u7b2c\u4e8c\u9875\u7684\u5f00\u5934\u4f4d\u7f6e\u3002<\/p>\n
\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8<\/div>\n
\u5982\u679c\u5728\u6d4f\u89c8\u7b2c\u4e00\u9875\u65f6\uff0c\u540c\u65f6\u5220\u9664\u4e86\u5f00\u5934\u7684\u6570\u636e\uff0c\u90a3\u4e48\u5f53\u6d4f\u89c8\u7b2c\u4e8c\u9875\u65f6\uff0c\u6570\u636e\u5c31\u4f1a\u51fa\u73b0\u4e00\u6bb5\u8df3\u7a7a\u7684\u73b0\u8c61\uff0c\u770b\u8d77\u6765\u597d\u50cf\u6570\u636e\u5411\u524d\u79fb\u52a8\u4e86\u4e00\u683c\u3002<\/p>\n
\u6e38\u6807\u5f0f\u5206\u9875<\/h4>\n
\u6e38\u6807\u662f\u7528\u4e8e\u552f\u4e00\u6807\u8bc6\u5143\u7d20\u7684ID\uff0c\u7c7b\u4f3c\u4e8e\u6307\u9488\u6216\u5730\u5740\u7684\u6982\u5ff5\uff0c\u7528\u4e8e\u8868\u793a\u5143\u7d20\u7684\u4f4d\u7f6e\u3002
\n\u5728GraphQL\u4e2d\uff0c\u63a8\u8350\u5c06\u6240\u9700\u7684\u503c\u7f16\u7801\u4e3abase64\u5b57\u7b26\u4e32\uff0c\u5e76\u5c06\u5176\u7528\u4f5c\u6e38\u6807\u3002
\n\u8bf7\u6ce8\u610f\uff0c\u6e38\u6807\u57fa\u4e8e\u7684\u601d\u60f3\u5e76\u4e0d\u5c40\u9650\u4e8eGraphQL\uff0c\u800c\u662f\u4e00\u79cd\u666e\u904d\u7684\u6982\u5ff5\u3002<\/p>\n
\u63d0\u9192\u60a8\uff0c\u5149\u6807\u662f\u4e0d\u900f\u660e\u7684\uff0c\u4e0d\u80fd\u4f9d\u8d56\u5176\u683c\u5f0f\uff0c\u6211\u4eec\u5efa\u8bae\u5bf9\u5176\u8fdb\u884cBase64\u7f16\u7801\u3002<\/p><\/blockquote>\n
 <\/p>\n
\u5728\u6307\u5b9a\u7684\u5149\u6807\u4f4d\u7f6e\u4e0a\uff0c\u6839\u636e\u83b7\u53d6\u4e0b\u4e00\u4e2a\u5143\u7d20\uff08\u524d\u4e00\u4e2a\u5143\u7d20\uff09\u7684\u6570\u91cf\u6765\u5b9e\u73b0\u3002Relay \u652f\u6301\u5411\u524d\u548c\u5411\u540e\u5206\u9875\u3002<\/p>\n
\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8<\/div>\n
\u4f5c\u4e3a\u4e00\u4e2a\u63a1\u7528\u6e38\u6807\u57fa\u7840\u7684\u4f8b\u5b50\uff0c\u6211\u4eec\u518d\u6b21\u4e3eGitHub\u4e0aRelay\u9875\u9762\u4f5c\u4e3a\u793a\u4f8b\u3002
\n\u5982\u679c\u770b\u4e00\u4e0b\u63d0\u4ea4\u5217\u8868\u9875\u9762\u7684URL\uff0c\u4e0e\u504f\u79fb\u57fa\u7840\u7684\u4f8b\u5b50\u4e0d\u540c\uff0c\u8fd9\u91cc\u91c7\u7528\u7684\u662f\u4e00\u4e2a\u53ef\u4ee5\u6307\u5b9a\u9875\u9762\u7684\u524d\u540e\u7684\u5206\u9875UI\uff0c\u800c\u4e0d\u662f\u9875\u9762\u7f16\u53f7\u3002<\/p>\n
\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8<\/div>\n
\u4ece\u7b2c\u4e00\u9875\u5f00\u59cb\uff0c\u5f53\u70b9\u51fb”Older”\u6309\u94ae\u4e00\u6b21\u65f6\uff0c\u53ef\u4ee5\u770b\u5230URL\u9644\u5e26\u4e86\u7c7b\u4f3c?after=ab92df525948d0d445101c97c489ce8c3087a990+34\u7684\u67e5\u8be2\u53c2\u6570\u3002<\/p>\n
https:\/\/github.com\/facebook\/relay\/commits\/main?after=ab92df525948d0d445101c97c489ce8c3087a990+34&branch=main&qualified_name=refs%2Fheads%2Fmain\r\n<\/code><\/pre>\n
\u8fd9\u4e2a ab92df525948d0d445101c97c489ce8c3087a990 \u662f\u6700\u65b0\u7684\u63d0\u4ea4\u7f16\u53f7\uff0c\u672b\u5c3e\u7684 +34 \u8868\u793a\u4ece\u8be5\u63d0\u4ea4\u5411\u540e +34 \u7684\u63d0\u4ea4\uff0c\u5373\u663e\u793a\u5728\u7b2c\u4e00\u9875\u4e0a\u7684\u6700\u540e\u4e00\u4e2a\u63d0\u4ea4\u7684\u4f4d\u7f6e\u3002
\n\u867d\u7136\u6ca1\u6709\u5b9e\u9645\u67e5\u770b\u4ee3\u7801\uff0c\u4f46\u6211\u8ba4\u4e3a\u8fd9\u53ef\u80fd\u662f\u7528\u6765\u5b9e\u73b0\u57fa\u4e8e\u5149\u6807\u7684\u5206\u9875\u7684\u3002<\/p>\n
\u4e0a\u8ff0\u7684\u4f8b\u5b50\u4e2d\uff0c\u6e38\u6807\u57fa\u4e8e\u9875\u9762\u524d\u540e\u79fb\u52a8\u3001\u67e5\u770b\u66f4\u591a\u3001\u65e0\u9650\u6eda\u52a8\u7b49\u6a21\u5f0f\u8fdb\u884c\u4f7f\u7528\u3002
\n\u6b64\u5916\uff0c\u7531\u4e8e\u53ef\u4ee5\u901a\u8fc7\u641c\u7d22\u786e\u5b9a\u6e38\u6807\u7684\u4f4d\u7f6e\uff0c\u56e0\u6b64\u4e0d\u9700\u8981\u8ba1\u7b97\u603b\u884c\u6570\uff0c\u56e0\u6b64\u5f53\u6570\u636e\u91cf\u589e\u52a0\u65f6\uff0c\u6027\u80fd\u4e0b\u964d\u8f83\u5c0f\u3002
\n\u901a\u8fc7\u552f\u4e00\u7684\u6e38\u6807\u6765\u786e\u5b9a\u8981\u663e\u793a\u7684\u6570\u636e\u4f4d\u7f6e\uff0c\u53ef\u4ee5\u8bf4\u5b83\u662f\u4e00\u79cd\u5bf9\u6570\u636e\u7684\u6dfb\u52a0\u548c\u5220\u9664\u5177\u6709\u5f88\u5f3a\u97e7\u6027\u7684\u65b9\u6cd5\u3002<\/p>\n
\u5173\u4e8eConnection\u7684\u89c4\u683c\u8bf4\u660e<\/h3>\n
\u5728GraphQL\u4e2d\uff0c\u901a\u5e38\u8ba4\u4e3a\u6e38\u6807\u5206\u9875\u662f\u6700\u5f3a\u5927\u7684\u5206\u9875\u65b9\u6cd5\uff0c\u5e76\u4f5c\u4e3a\u6700\u4f73\u5b9e\u8df5\u4ecb\u7ecd\u4e86\u5982\u4f55\u5b9e\u73b0\u3002<\/p>\n
 <\/p>\n
Relay\u5df2\u7ecf\u5c06\u6b64\u4f5c\u4e3a\u8fde\u63a5\u6a21\u5f0f\u8fdb\u884c\u4e86\u6807\u51c6\u5316\u5e76\u63d0\u4f9b\u3002<\/p>\n
 <\/p>\n
\u6bd4\u5982\u8bf4\uff0c\u5982\u679c\u8003\u8651\u4ee5\u5206\u9875\u7684\u65b9\u5f0f\u5c55\u793a\u7528\u6237\u5217\u8868\uff0c\u5219\u53ef\u4ee5\u901a\u8fc7\u4ee5\u4e0b\u65b9\u5f0f\u6765\u5b9a\u4e49GraphQL schema\u3002<\/p>\n
extend<\/span> type<\/span> Query<\/span> {<\/span>\r\n  users<\/span>(<\/span>\r\n    first<\/span>:<\/span> Int<\/span>\r\n    after<\/span>:<\/span> String<\/span>\r\n    last<\/span>:<\/span> Int<\/span>\r\n    before<\/span>:<\/span> String<\/span>\r\n  ):<\/span> UserConnection<\/span>!<\/span>\r\n}<\/span>\r\n\r\ninterface<\/span> Node<\/span> {<\/span>\r\n  id<\/span>:<\/span> ID<\/span>!<\/span>\r\n}<\/span>\r\n\r\ntype<\/span> UsersConnection<\/span> {<\/span>\r\n  edges<\/span>:<\/span> [<\/span>UserEdge<\/span>]<\/span>\r\n  pageInfo<\/span>:<\/span> PageInfo<\/span>!<\/span>\r\n  totalCount<\/span>:<\/span> Int<\/span>!<\/span>\r\n}<\/span>\r\n\r\ntype<\/span> UserEdge<\/span> {<\/span>\r\n  cursor<\/span>:<\/span> String<\/span>!<\/span>\r\n  node<\/span>:<\/span> User<\/span>\r\n}<\/span>\r\n\r\ntype<\/span> User<\/span> implements<\/span> Node<\/span> {<\/span>\r\n  id<\/span>:<\/span> ID<\/span>!<\/span>\r\n  name<\/span>:<\/span> String<\/span>!<\/span>\r\n  age<\/span>:<\/span> Int<\/span>!<\/span>\r\n}<\/span>\r\n\r\ntype<\/span> PageInfo<\/span> {<\/span>\r\n  hasNextPage<\/span>:<\/span> Boolean<\/span>!<\/span>\r\n  hasPreviousPage<\/span>:<\/span> Boolean<\/span>!<\/span>\r\n  startCursor<\/span>:<\/span> String<\/span>\r\n  endCursor<\/span>:<\/span> String<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
\u5982\u679c\u60f3\u83b7\u53d6\u524d10\u4e2a\u9879\u76ee\u7684\u5217\u8868\uff0c\u8c03\u7528\u67e5\u8be2\u7684\u65b9\u9762\u5982\u4e0b\u6240\u793a\u3002<\/p>\n
import<\/span> {<\/span> graphql<\/span> }<\/span> from<\/span> \"<\/span>react-relay<\/span>\"<\/span>\r\n\r\nconst<\/span> query<\/span> =<\/span> graphql<\/span>`\r\n  query usersQuery {\r\n    users(first: 10) {\r\n      ... on UsersConnection {\r\n        edges {\r\n          node {\r\n            name\r\n            age\r\n          }\r\n        }\r\n        pageInfo {\r\n          hasNextPage\r\n          hasPreviousPage\r\n        }\r\n        totalCount\r\n      }\r\n    }\r\n  }\r\n`<\/span>\r\n<\/code><\/pre>\n
\u5982\u679c `after` \u672a\u5b9a\u4e49\uff0c\u5c06\u4ece\u7b2c\u4e00\u4e2a\u4eba\u5f00\u59cb\u83b7\u53d6\u3002
\n\u5982\u679c\u8981\u83b7\u53d6\u7b2c\u4e8c\u9875\uff08\u7b2c11\u4eba\u81f3\u7b2c20\u4eba\uff09\uff0c\u8bf7\u5728\u53d8\u91cf\u4e2d\u6dfb\u52a0 `after`\uff0c\u5e76\u6307\u5b9a\u7b2c10\u4e2a\u7528\u6237\u7684\u5149\u6807\u3002<\/p>\n
\u5b9e\u65bd<\/h2>\n
\u63a5\u529b\u8fde\u63a5\u548cBE API\u7684\u5b9e\u73b0\u5206\u79bb<\/h3>\n
\u5728\u4f7f\u7528\u6211\u6240\u521b\u5efa\u7684\u5206\u9875\u7684\u754c\u9762\u4e0a\uff0c\u9700\u8981\u6ee1\u8db3\u4ee5\u4e0b\u7684\u663e\u793a\u8981\u6c42\u3002<\/p>\n
    \n
  • \n
      \u300c\u524d\u306e10\u4ef6\u300d\u300c1\u300d\u300c2\u300d\u300c\uff13\u300d\u300c\u6b21\u306e10\u4ef6\u300d\u3068\u3044\u3063\u305f\u3001\u30da\u30fc\u30b8\u756a\u53f7\u6307\u5b9a\u53ef\u80fd\u306a\u30da\u30fc\u30b8\u30cd\u30fc\u30b7\u30e7\u30f3\u3067\u3042\u308b\u3053\u3068<\/ul>\n<\/li>\n<\/ul>\n
       <\/p>\n
        \u753b\u9762\u3092\u66f4\u65b0\u3057\u305f\u969b\u306b\u3001\u73fe\u5728\u958b\u3044\u3066\u3044\u308b\u30da\u30fc\u30b8\u3092\u4fdd\u6301\u3059\u308b\u3053\u3068<\/ul>\n
        \u5728FE\u4e0eBE\u4e4b\u95f4\u5efa\u7acb\u4e86BFF\uff0c\u5728FE-BFF\u4e4b\u95f4\u4f7f\u7528GraphQL\u8fdb\u884c\u901a\u4fe1\uff0c\u5728BFF-BE\u4e4b\u95f4\u4f7f\u7528REST API\u8fdb\u884c\u901a\u4fe1\u3002\u4f46\u662f\uff0c\u8fd9\u6b21BE API\u5c06\u57fa\u4e8e\u504f\u79fb\u91cf\u6765\u5b9e\u73b0\u3002
        \n\u5982\u679c\u8981\u6a21\u62df\u9875\u9762\u7f16\u53f7\u65b9\u5f0f\u7684UI\uff0c\u53ea\u8fd4\u56deAPI\u5f53\u524d\u663e\u793a\u9875\u9762\u672b\u5c3e\u7684\u5149\u6807\uff08endCursor\uff09\uff0c\u5219\u65e0\u6cd5\u8df3\u8f6c\u5230\u4e0b\u4e00\u9875\u4ee5\u5916\u7684\u9875\u9762\u3002
        \n\u56e0\u6b64\uff0c\u5982\u679c\u8981\u8fd4\u56de\u9002\u7528\u4e8e\u6240\u6709\u9875\u9762\u7684endCursor\uff0c\u5219\u5fc5\u987b\u4ece\u6570\u636e\u5e93\u4e2d\u9009\u62e9\u6240\u6709\u5143\u7d20\u3002
        \n\u6b64\u5916\uff0c\u6bcf\u4e2aAPI\u90fd\u9700\u8981\u8003\u8651\u5149\u6807\uff0c\u8fd9\u4e5f\u4f1a\u5e26\u6765\u4e00\u4e9b\u9ebb\u70e6\uff0c\u6240\u4ee5\u91c7\u7528\u4e86\u65b9\u4fbf\u5b9e\u73b0\u7684\u57fa\u4e8e\u504f\u79fb\u91cf\u7684\u65b9\u5f0f\u3002<\/p>\n
        GET \/users?offset=20&limit=10\r\n<\/code><\/pre>\n
        \u7136\u800c\uff0c\u4f5c\u4e3a\u4e00\u4e2aFE\uff0c\u4f7f\u7528Relay\uff0c\u540c\u65f6\u4e0d\u4f7f\u7528Connection\u6839\u636eBE\u7684\u89c4\u8303\u662f\u4e00\u79cd\u6d6a\u8d39\uff0c\u6240\u4ee5\u6211\u4eec\u9009\u62e9\u4e86\u57fa\u4e8e\u6e38\u6807\u7684\u5b9e\u73b0\u3002
        \n\u6b63\u5982\u524d\u9762\u63d0\u5230\u7684\uff0c\u57fa\u4e8e\u6e38\u6807\u7684\u5b9e\u73b0\u5728\u6570\u636e\u589e\u51cf\u65b9\u9762\u66f4\u5f3a\u3002
        \n\u6b64\u5916\uff0c\u5f53\u540e\u6765\u9875\u9762\u6837\u5f0f\u53d8\u66f4\u4e3a\u201c\u52a0\u8f7d\u66f4\u591a\u201d\u7b49\u65f6\uff0c\u57fa\u4e8e\u6e38\u6807\u7684\u5b9e\u73b0\u66f4\u5bb9\u6613\u8fdb\u884c\u9002\u914d\uff0c\u800c\u4e14\u6211\u4eec\u8ba4\u4e3a\u91c7\u7528\u7684\u5e93\u63d0\u4f9b\u7684\u5b98\u65b9\u529f\u80fd\u6709\u5f88\u5927\u7684\u4f18\u52bf\u3002<\/p>\n
        FE\u5728\u5b9e\u9645\u5b9e\u73b0\u4e2d\uff0c\u521b\u5efa\u4e86\u4e00\u4e9b\u80fd\u591f\u5728GraphQL\u7684\u89e3\u6790\u5668\u4e2d\u76f8\u4e92\u8f6c\u6362cursor\u548coffset&limit\u7684util\u51fd\u6570\uff0c\u5e76\u5c06\u5176\u5f15\u5165\u3002
        \ngraphql-relay\u63d0\u4f9b\u4e86\u4e00\u4e9b\u51fd\u6570\uff0c\u6bd4\u5982cursorToOffset()\u548coffsetToCursor()\uff0cRelay Connection\u4e5f\u53ef\u4ee5\u652f\u6301\u57fa\u4e8eoffset\u7684API\u3002<\/p>\n
         <\/p>\n
        \u6211\u89c9\u5f97\u63d0\u4f9b\u8fd9\u79cd\u65b9\u6cd5\u53ef\u4ee5\u5c06FE\u548cBE\u7684\u5b9e\u65bd\u5206\u79bb\uff0c\u8ba9\u6bcf\u4e2a\u90e8\u5206\u90fd\u53ef\u4ee5\u9009\u62e9\u6700\u4f18\u7684\u65b9\u6cd5\uff0c\u8fd9\u662f\u4e00\u4e2a\u4f18\u70b9\u3002<\/p>\n
        \u53e6\u5916\uff0c\u4e3a\u4e86\u8865\u5145 PageInfo \u7c7b\u578b\u65e0\u6cd5\u63d0\u4f9b\u7684\u5176\u4ed6\u4fe1\u606f\uff0c\u6211\u4eec\u8fd8\u5b9a\u4e49\u4e86\u4e00\u4e2a\u53ef\u5728\u6574\u4e2a\u6a21\u5f0f\u4e2d\u5171\u4eab\u7684\u81ea\u5b9a\u4e49\u6a21\u5f0f\u3002<\/p>\n
        type<\/span> UserConnection<\/span> {<\/span>\r\n  edges<\/span>:<\/span> [<\/span>UserEdge<\/span>]<\/span>\r\n  pageInfo<\/span>:<\/span> PageInfo<\/span>!<\/span>\r\n+<\/span> paginationInfo<\/span>:<\/span> [<\/span>PaginationInfo<\/span>!]!<\/span>\r\n<\/span>  totalCount<\/span>:<\/span> Int<\/span>!<\/span>\r\n}<\/span>\r\n\r\n# \u5404\u30da\u30fc\u30b8\u3078\u306e\u30ea\u30f3\u30af\u751f\u6210\u7b49\u3001\u30da\u30fc\u30b8\u30e3\u30fc\u5b9f\u88c5\u306b\u5fc5\u8981\u306a\u9805\u76ee\u3092\u8fd4\u3059<\/span>\r\n+ <\/span>type<\/span> PaginationInfo<\/span> {<\/span>\r\n<\/span>+<\/span>   after<\/span>:<\/span> String<\/span> # \u5404\u30da\u30fc\u30b8\u672b\u5c3e\u306e User \u306e\u30ab\u30fc\u30bd\u30eb<\/span>\r\n<\/span>+<\/span>   currentPage<\/span>:<\/span> Boolean<\/span>!<\/span> # \u73fe\u5728\u306e\u30da\u30fc\u30b8\u304b\u3069\u3046\u304b<\/span>\r\n<\/span>+<\/span>   pageIndex<\/span>:<\/span> Int<\/span>!<\/span> # \u30da\u30fc\u30b8\u756a\u53f7<\/span>\r\n<\/span>+<\/span> }<\/span>\r\n<\/span><\/code><\/pre>\n
        \u6839\u636e\u4e0a\u8ff0\uff0c\u5b9e\u9645\u7684\u67e5\u8be2\u53d8\u6210\u4e86\u4ee5\u4e0b\u5f62\u5f0f\u3002<\/p>\n
        import<\/span> {<\/span> graphql<\/span> }<\/span> from<\/span> \"<\/span>react-relay<\/span>\"<\/span>\r\n\r\nconst<\/span> query<\/span> =<\/span> graphql<\/span>`\r\n  query usersQuery(\r\n    $after: String\r\n    $first: Int\r\n  ) {\r\n    users(\r\n      after: $after\r\n      first: $first\r\n    ) {\r\n      ... on UsersConnection {\r\n        edges {\r\n          node {\r\n            name\r\n            age\r\n          }\r\n        }\r\n        paginationInfo {\r\n          after\r\n          isCurrent\r\n          pageIndex\r\n        }\r\n        totalCount\r\n      }\r\n    }\r\n  }\r\n`<\/span>\r\n<\/code><\/pre>\n
        \u5c06\u9875\u9762\u7f16\u53f7\u8f6c\u6362\u4e3a\u5149\u6807\u4f4d\u7f6e\u3002<\/h3>\n
        \u5982\u524d\u6240\u8ff0\uff0c\u6211\u4eec\u51b3\u5b9a\u4ee5\u57fa\u4e8e\u5149\u6807\u7684\u65b9\u5f0f\u5b9e\u73b0\u9875\u9762\u7f16\u53f7\u683c\u5f0f\u7684\u7528\u6237\u754c\u9762\u3002<\/p>\n
        \u5728 Relay \u7684\u6559\u7a0b\u4e2d\u4ecb\u7ecd\u4e86\u4f7f\u7528 usePaginationFragment() \u8fdb\u884c\u91cd\u65b0\u83b7\u53d6\u6570\u636e\u7684\u65b9\u6cd5\u3002
        \n\u4f46\u662f\u7531\u4e8e\u4f7f\u7528\u8fd9\u79cd\u65b9\u6cd5\u5f88\u96be\u5b9e\u73b0\u6240\u9700\u7684\u7528\u6237\u754c\u9762\uff0c\u6240\u4ee5\u6211\u91c7\u53d6\u4e86\u5c06\u9875\u9762\u7f16\u53f7\u4fdd\u5b58\u5728URL\u67e5\u8be2\u4e2d\uff0c\u5e76\u5c06\u8be5\u9875\u9762\u7f16\u53f7\u8f6c\u6362\u4e3a\u6e38\u6807\u7684\u65b9\u6cd5\u3002<\/p>\n
        \/users?page=2\r\n<\/code><\/pre>\n
        \u9996\u5148\uff0c\u5b9a\u4e49\u4e00\u4e2a\u51fd\u6570\uff0c\u8be5\u51fd\u6570\u80fd\u591f\u63a5\u6536\u9875\u9762\u7f16\u53f7\u548c\u6bcf\u9875\u663e\u793a\u7684\u9879\u76ee\u6570\u91cf\uff0c\u5e76\u8fd4\u56de\u5bf9\u5e94\u9875\u9762\u7f16\u53f7\u7684\u504f\u79fb\u503c\u3002<\/p>\n
        \/**\r\n * @example\r\n * convertPageToOffset({ page: 2, itemsPerPage: 10 })\r\n * \u2192 10\r\n *\/<\/span>\r\nexport<\/span> const<\/span> convertPageToOffset<\/span> =<\/span> ({<\/span>\r\n  page<\/span>,<\/span>\r\n  itemsPerPage<\/span>,<\/span>\r\n}:<\/span> {<\/span>\r\n  page<\/span>:<\/span> number<\/span>;<\/span>\r\n  itemsPerPage<\/span>:<\/span> number<\/span>;<\/span>\r\n})<\/span> =><\/span> {<\/span>\r\n  if <\/span>(<\/span>page<\/span> <=<\/span> 0<\/span> ||<\/span> itemsPerPage<\/span> <=<\/span> 0<\/span>)<\/span> {<\/span>\r\n    throw<\/span> Error<\/span>(<\/span>\"<\/span>page \u3068 itemsPerPage \u306b\u306f 0 \u3088\u308a\u5927\u304d\u3044\u6570\u3092\u8a2d\u5b9a\u3057\u3066\u304f\u3060\u3055\u3044<\/span>\"<\/span>);<\/span>\r\n  }<\/span>\r\n\r\n  return <\/span>(<\/span>page<\/span> -<\/span> 1<\/span>)<\/span> *<\/span> itemsPerPage<\/span>;<\/span>\r\n};<\/span>\r\n<\/code><\/pre>\n
        \u6839\u636e\u8fd9\u4e2a\uff0c\u6211\u5728\u9875\u9762\u7684getInitialProps\u4e2d\uff0c\u5c06\u9875\u9762\u67e5\u8be2\u4e00\u6b21\u8f6c\u6362\u4e3a\u504f\u79fb\u91cf\uff0c\u7136\u540e\u518d\u4f7f\u7528offsetToCursor()\u5c06\u5176\u8f6c\u6362\u4e3a\u6e38\u6807\u3002
        \n\u203b\u7531\u4e8e\u5404\u79cd\u539f\u56e0\uff0c\u5728\u672c\u9879\u76ee\u4e2d\u6211\u4eec\u4f7f\u7528\u4e86Next.js\u4e2d\u88ab\u5f03\u7528\u7684getInitialProps()\u3002<\/p>\n
        import<\/span> {<\/span> z<\/span> }<\/span> from<\/span> \"<\/span>zod<\/span>\"<\/span>;<\/span>\r\nimport<\/span> {<\/span> offsetToCursor<\/span> }<\/span> from<\/span> \"<\/span>graphql-relay<\/span>\"<\/span>;<\/span>\r\n\r\nconst<\/span> ITEMS_PER_PAGE<\/span> =<\/span> 10<\/span>;<\/span>\r\n\r\nPage<\/span>.<\/span>getInitialProps<\/span> =<\/span> async <\/span>(<\/span>ctx<\/span>)<\/span> =><\/span> {<\/span>\r\n  \/\/ normalizeQueryString() \u306f URL \u304b\u3089\u30af\u30a8\u30ea\u3092\u53d6\u5f97\u3057\u3001{ [key: string]: string | undefined } \u578b\u306b\u3057\u3066\u8fd4\u3059\u81ea\u524d\u95a2\u6570<\/span>\r\n  const<\/span> {<\/span> page<\/span> }<\/span> =<\/span> normalizeQueryString<\/span>(<\/span>ctx<\/span>.<\/span>query<\/span>);<\/span>\r\n\r\n  \/\/ page \u306b 0 \u3084\u30de\u30a4\u30ca\u30b9\u306e\u6570\u5024\u3001\u305d\u306e\u4ed6\u4e0d\u6b63\u306a\u5024\u3092\u6307\u5b9a\u3057\u305f\u5834\u5408\u306f 404<\/span>\r\n  \/\/ 2\u30da\u30fc\u30b8\u3057\u304b\u306a\u3044\u306e\u306b3\u30da\u30fc\u30b8\u76ee\u3092\u6307\u5b9a\u3057\u305f\u5834\u5408\u306f 0 \u4ef6\u8868\u793a<\/span>\r\n  if <\/span>(<\/span>page<\/span>)<\/span> {<\/span>\r\n    const<\/span> pageSchema<\/span> =<\/span> z<\/span>.<\/span>number<\/span>().<\/span>positive<\/span>();<\/span>\r\n    const<\/span> {<\/span> success<\/span>:<\/span> isValidPage<\/span> }<\/span> =<\/span> pageSchema<\/span>.<\/span>safeParse<\/span>(<\/span>Number<\/span>(<\/span>page<\/span>));<\/span>\r\n    if <\/span>(<\/span>!<\/span>isValidPage<\/span>)<\/span> {<\/span>\r\n      return<\/span> {<\/span>\r\n        errorCode<\/span>:<\/span> 404<\/span>,<\/span>\r\n      };<\/span>\r\n    }<\/span>\r\n  }<\/span>\r\n\r\n  \/\/ page \u3092 offset \u306b\u5909\u63db\u3059\u308b<\/span>\r\n  const<\/span> offset<\/span> =<\/span> convertPageToOffset<\/span>({<\/span>\r\n    page<\/span>:<\/span> page<\/span> ?<\/span> Number<\/span>(<\/span>page<\/span>)<\/span> :<\/span> 1<\/span>,<\/span> \/\/ 1 \u30da\u30fc\u30b8\u76ee\u306f\u30af\u30a8\u30ea\u304c\u3064\u304b\u306a\u3044<\/span>\r\n    itemsPerPage<\/span>:<\/span> ITEMS_PER_PAGE<\/span>,<\/span>\r\n  });<\/span>\r\n\r\n  \/\/ offset \u3092 cursor \u306b\u5909\u63db\u3059\u308b<\/span>\r\n  \/\/ offset \u304c 0 \u306e\u5834\u5408\u306f1\u30da\u30fc\u30b8\u76ee\u306e\u305f\u3081\u3001cursor \u306f undefined \u3068\u306a\u308b<\/span>\r\n  const<\/span> cursor<\/span> =<\/span> offset<\/span> ?<\/span> offsetToCursor<\/span>(<\/span>offset<\/span> -<\/span> 1<\/span>)<\/span> :<\/span> undefined<\/span>\r\n\r\n  \/\/ \u4ee5\u4e0b\u7701\u7565<\/span>\r\n};<\/span>\r\n<\/code><\/pre>\n
        \u5982\u679c\u5728\u9875\u9762\u67e5\u8be2\u4e2d\u6545\u610f\u8f93\u5165\u4e86\u65e0\u6548\u7684\u503c\uff0c\u4f8b\u59820\u3001\u8d1f\u6570\u6216\u5176\u4ed6\u65e0\u6cd5\u8f6c\u6362\u4e3a\u6570\u5b57\u7684\u4efb\u610f\u5b57\u7b26\u4e32\uff0c\u5c06\u663e\u793a404\u9875\u9762\u3002
        \n\u7531\u4e8e\u4f7f\u7528\u4e86\u9a8c\u8bc1\u5e93zod\uff0c\u6211\u4eec\u4f7f\u7528zod\u7684safeParse()\u51fd\u6570\u6765\u5224\u65ad\u65e0\u6548\u7684\u9875\u9762\u3002<\/p>\n
         <\/p>\n
        \u53e6\u5916\uff0c\u539f\u672c\u7684\u670d\u52d9\u8981\u6c42\u4e26\u672a\u8003\u616e\u5230 URL \u7684\u67e5\u8a62\u53c3\u6578\u6216\u5176\u4ed6\u932f\u8aa4\u9700\u6c42\uff0c\u56e0\u6b64\u6211\u5011\u5411\u524d\u7aef\u90e8\u5206\u63d0\u51fa\u4e86\u9700\u8981\u9032\u884c\u9019\u6a23\u7684\u5be6\u73fe\uff0c\u4e26\u8acb\u6c42\u9032\u884c\u4fee\u6b63\u3002<\/p>\n
        \u6700\u521d\u7684\u5b9e\u73b0\u662f\u60f3\u5c06\u5149\u6807\u76f4\u63a5\u5305\u542b\u5728URL\u4e2d\u3002
        \nusers\/cursor=ABC…\u7136\u800c\uff0c\u6211\u4eec\u6536\u5230\u4e86\u4e00\u4e9b\u5efa\u8bae\uff0c\u65e0\u8bba\u662f\u5426\u4f7f\u7528GraphQL\uff0cURL\u90fd\u5e94\u8be5\u4fdd\u6301\u4e00\u81f4\uff08\u5e94\u907f\u514d\u5728URL\u4e2d\u5305\u542bGraphQL\u7279\u5b9a\u7684\u503c\uff09\uff0c\u4e8e\u662f\u6211\u4eec\u5bf9\u6587\u7ae0\u4e2d\u7684\u65b9\u6cd5\u8fdb\u884c\u4e86\u4fee\u6b63\u3002<\/p>\n<\/div>\n
        \u5bf9\u4e8e\u8fd9\u4e2a\u95ee\u9898\uff0c\u6211\u7684\u89c1\u89e3\u662f…<\/h2>\n
        \u8d77\u521d\u6211\u53ea\u4e86\u89e3\u57fa\u4e8e\u504f\u79fb\u91cf\u7684\u5206\u9875\uff0c\u4f46\u540e\u6765\u4e86\u89e3\u5230\u4e86\u57fa\u4e8e\u6e38\u6807\u7684\u5206\u9875\u548c\u5404\u79cd\u5206\u9875\u65b9\u5f0f\u7684\u7279\u70b9\u3002\u7136\u540e\uff0c\u6211\u5b66\u4e60\u4e86\u4f7f\u7528Relay Connection\u8fdb\u884c\u5b9e\u73b0\u7684\u65b9\u6cd5\u3002\u8fd9\u6b21\u7279\u522b\u4e4b\u5904\u5728\u4e8e\u540e\u7aef\u91c7\u7528\u4e86\u57fa\u4e8e\u504f\u79fb\u91cf\u7684\u5b9e\u73b0\uff0c\u800c\u524d\u7aef\u5219\u91c7\u7528\u4e86\u57fa\u4e8e\u6e38\u6807\u7684\u65b9\u5f0f\uff0c\u56e0\u6b64\u5373\u4f7f\u662f\u5206\u9875\u8fd9\u4e00\u70b9\uff0c\u5728\u8003\u8651\u4e0d\u540c\u7684\u65b9\u6cd5\u4e0a\u4e5f\u9700\u8981\u4e00\u4e9b\u601d\u8003\u7684\u3002<\/p>\n
        \u800c\u4e14\uff0c\u6b63\u5982\u6211\u5728\u6587\u4e2d\u6240\u63d0\u5230\u7684\uff0c\u901a\u8fc7\u5229\u7528\u6211\u4eec\u6240\u91c7\u7528\u7684Relay\u5e93\u63d0\u4f9b\u7684\u529f\u80fd\uff0c\u6211\u4eec\u53ef\u4ee5\u589e\u52a0\u5b9e\u73b0\u9009\u62e9\u7684\u53ef\u80fd\u6027\u3002
        \n\u8fd9\u6b21\u6211\u4eec\u6ca1\u6709\u4f7f\u7528\uff0c\u4f46\u662f\u4e3e\u4e2a\u4f8b\u5b50\uff0cRelay\u63d0\u4f9b\u4e86\u4e00\u4e9b\u6307\u4ee4\uff0c\u5982@appendEdge\u548c@prependEdge \uff0c\u4ee5\u4fbf\u5728Mutation\uff08\u6570\u636e\u66f4\u65b0\uff09\u65f6\u80fd\u66f4\u65b0Connection\u7684\u7f13\u5b58\u3002<\/p>\n
         <\/p>\n
        \u7531\u4e8e\u9879\u76ee\u9700\u8981\u5f00\u53d1\u5b9e\u65f6\u6027\u670d\u52a1\uff0c\u76ee\u524d\u6ca1\u6709\u4f7f\u7528\u7f13\u5b58\u6216\u9700\u8981\u5bf9\u5217\u8868\u8fdb\u884c\u66f4\u65b0\u7684\u573a\u666f\u3002\u4f46\u662f\uff0c\u5982\u679c\u5c06\u6765\u9700\u6c42\u53d1\u751f\u53d8\u5316\uff0c\u6211\u4eec\u4e5f\u80fd\u591f\u901a\u8fc7\u6dfb\u52a0\u548c\u5229\u7528\u8fd9\u4e9b\u529f\u80fd\u6765\u83b7\u5f97\u4e00\u4e9b\u4f18\u52bf\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
        \u6211\u4e4b\u524d\u5728\u521d\u6b21\u5b9e\u73b0\u9875\u9762\u5206\u9875\u65f6\u4f7f\u7528\u4e86Relay Connection\u3002\u7531\u4e8e\u5b9e\u65bd\u8981\u6c42\u7684\u9650\u5236\uff0c\u867d\u7136\u6ca1\u6709\u5c06\u5176\u4f18\u52bf\u53d1\u6325\u5230\u6700 […]<\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-48030","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"\n\u901a\u8fc7\u9996\u6b21\u7684\u4e2d\u7ee7\u8fde\u63a5\u5b9e\u73b0\u7684\u9875\u9762\u5206\u9875\u529f\u80fd - 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\/\u901a\u8fc7\u9996\u6b21\u7684\u4e2d\u7ee7\u8fde\u63a5\u5b9e\u73b0\u7684\u9875\u9762\u5206\u9875\u529f\u80fd\u3002\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u901a\u8fc7\u9996\u6b21\u7684\u4e2d\u7ee7\u8fde\u63a5\u5b9e\u73b0\u7684\u9875\u9762\u5206\u9875\u529f\u80fd\" \/>\n<meta property=\"og:description\" content=\"\u6211\u4e4b\u524d\u5728\u521d\u6b21\u5b9e\u73b0\u9875\u9762\u5206\u9875\u65f6\u4f7f\u7528\u4e86Relay Connection\u3002\u7531\u4e8e\u5b9e\u65bd\u8981\u6c42\u7684\u9650\u5236\uff0c\u867d\u7136\u6ca1\u6709\u5c06\u5176\u4f18\u52bf\u53d1\u6325\u5230\u6700 […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/zh\/blog\/\u901a\u8fc7\u9996\u6b21\u7684\u4e2d\u7ee7\u8fde\u63a5\u5b9e\u73b0\u7684\u9875\u9762\u5206\u9875\u529f\u80fd\u3002\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-15T06:16:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-03T15:06:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d8298913a08637a6b0c3a\/6-0.png\" \/>\n<meta name=\"author\" content=\"\u96c5, \u609f\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u96c5, \u609f\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 \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\/%e9%80%9a%e8%bf%87%e9%a6%96%e6%ac%a1%e7%9a%84%e4%b8%ad%e7%bb%a7%e8%bf%9e%e6%8e%a5%e5%ae%9e%e7%8e%b0%e7%9a%84%e9%a1%b5%e9%9d%a2%e5%88%86%e9%a1%b5%e5%8a%9f%e8%83%bd%e3%80%82\/\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e9%80%9a%e8%bf%87%e9%a6%96%e6%ac%a1%e7%9a%84%e4%b8%ad%e7%bb%a7%e8%bf%9e%e6%8e%a5%e5%ae%9e%e7%8e%b0%e7%9a%84%e9%a1%b5%e9%9d%a2%e5%88%86%e9%a1%b5%e5%8a%9f%e8%83%bd%e3%80%82\/\",\"name\":\"\u901a\u8fc7\u9996\u6b21\u7684\u4e2d\u7ee7\u8fde\u63a5\u5b9e\u73b0\u7684\u9875\u9762\u5206\u9875\u529f\u80fd - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\"},\"datePublished\":\"2023-05-15T06:16:19+00:00\",\"dateModified\":\"2024-05-03T15:06:40+00:00\",\"author\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/f044a4b7fa4ee2701702942002419ca6\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e9%80%9a%e8%bf%87%e9%a6%96%e6%ac%a1%e7%9a%84%e4%b8%ad%e7%bb%a7%e8%bf%9e%e6%8e%a5%e5%ae%9e%e7%8e%b0%e7%9a%84%e9%a1%b5%e9%9d%a2%e5%88%86%e9%a1%b5%e5%8a%9f%e8%83%bd%e3%80%82\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/zh\/blog\/%e9%80%9a%e8%bf%87%e9%a6%96%e6%ac%a1%e7%9a%84%e4%b8%ad%e7%bb%a7%e8%bf%9e%e6%8e%a5%e5%ae%9e%e7%8e%b0%e7%9a%84%e9%a1%b5%e9%9d%a2%e5%88%86%e9%a1%b5%e5%8a%9f%e8%83%bd%e3%80%82\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e9%80%9a%e8%bf%87%e9%a6%96%e6%ac%a1%e7%9a%84%e4%b8%ad%e7%bb%a7%e8%bf%9e%e6%8e%a5%e5%ae%9e%e7%8e%b0%e7%9a%84%e9%a1%b5%e9%9d%a2%e5%88%86%e9%a1%b5%e5%8a%9f%e8%83%bd%e3%80%82\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.silicloud.com\/zh\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u901a\u8fc7\u9996\u6b21\u7684\u4e2d\u7ee7\u8fde\u63a5\u5b9e\u73b0\u7684\u9875\u9762\u5206\u9875\u529f\u80fd\"}]},{\"@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\/f044a4b7fa4ee2701702942002419ca6\",\"name\":\"\u96c5, \u609f\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e71a913e914f1aad1efc391f92084294bac54bc782acd289638580134cf667a6?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e71a913e914f1aad1efc391f92084294bac54bc782acd289638580134cf667a6?s=96&d=mm&r=g\",\"caption\":\"\u96c5, \u609f\"},\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/author\/yawu\/\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e9%80%9a%e8%bf%87%e9%a6%96%e6%ac%a1%e7%9a%84%e4%b8%ad%e7%bb%a7%e8%bf%9e%e6%8e%a5%e5%ae%9e%e7%8e%b0%e7%9a%84%e9%a1%b5%e9%9d%a2%e5%88%86%e9%a1%b5%e5%8a%9f%e8%83%bd%e3%80%82\/#local-main-organization-logo\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Blog - Silicon Cloud\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u901a\u8fc7\u9996\u6b21\u7684\u4e2d\u7ee7\u8fde\u63a5\u5b9e\u73b0\u7684\u9875\u9762\u5206\u9875\u529f\u80fd - 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\/\u901a\u8fc7\u9996\u6b21\u7684\u4e2d\u7ee7\u8fde\u63a5\u5b9e\u73b0\u7684\u9875\u9762\u5206\u9875\u529f\u80fd\u3002\/","og_locale":"zh_CN","og_type":"article","og_title":"\u901a\u8fc7\u9996\u6b21\u7684\u4e2d\u7ee7\u8fde\u63a5\u5b9e\u73b0\u7684\u9875\u9762\u5206\u9875\u529f\u80fd","og_description":"\u6211\u4e4b\u524d\u5728\u521d\u6b21\u5b9e\u73b0\u9875\u9762\u5206\u9875\u65f6\u4f7f\u7528\u4e86Relay Connection\u3002\u7531\u4e8e\u5b9e\u65bd\u8981\u6c42\u7684\u9650\u5236\uff0c\u867d\u7136\u6ca1\u6709\u5c06\u5176\u4f18\u52bf\u53d1\u6325\u5230\u6700 […]","og_url":"https:\/\/www.silicloud.com\/zh\/blog\/\u901a\u8fc7\u9996\u6b21\u7684\u4e2d\u7ee7\u8fde\u63a5\u5b9e\u73b0\u7684\u9875\u9762\u5206\u9875\u529f\u80fd\u3002\/","og_site_name":"Blog - Silicon Cloud","article_published_time":"2023-05-15T06:16:19+00:00","article_modified_time":"2024-05-03T15:06:40+00:00","og_image":[{"url":"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d8298913a08637a6b0c3a\/6-0.png"}],"author":"\u96c5, \u609f","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"\u96c5, \u609f","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"2 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e9%80%9a%e8%bf%87%e9%a6%96%e6%ac%a1%e7%9a%84%e4%b8%ad%e7%bb%a7%e8%bf%9e%e6%8e%a5%e5%ae%9e%e7%8e%b0%e7%9a%84%e9%a1%b5%e9%9d%a2%e5%88%86%e9%a1%b5%e5%8a%9f%e8%83%bd%e3%80%82\/","url":"https:\/\/www.silicloud.com\/zh\/blog\/%e9%80%9a%e8%bf%87%e9%a6%96%e6%ac%a1%e7%9a%84%e4%b8%ad%e7%bb%a7%e8%bf%9e%e6%8e%a5%e5%ae%9e%e7%8e%b0%e7%9a%84%e9%a1%b5%e9%9d%a2%e5%88%86%e9%a1%b5%e5%8a%9f%e8%83%bd%e3%80%82\/","name":"\u901a\u8fc7\u9996\u6b21\u7684\u4e2d\u7ee7\u8fde\u63a5\u5b9e\u73b0\u7684\u9875\u9762\u5206\u9875\u529f\u80fd - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website"},"datePublished":"2023-05-15T06:16:19+00:00","dateModified":"2024-05-03T15:06:40+00:00","author":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/f044a4b7fa4ee2701702942002419ca6"},"breadcrumb":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e9%80%9a%e8%bf%87%e9%a6%96%e6%ac%a1%e7%9a%84%e4%b8%ad%e7%bb%a7%e8%bf%9e%e6%8e%a5%e5%ae%9e%e7%8e%b0%e7%9a%84%e9%a1%b5%e9%9d%a2%e5%88%86%e9%a1%b5%e5%8a%9f%e8%83%bd%e3%80%82\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/zh\/blog\/%e9%80%9a%e8%bf%87%e9%a6%96%e6%ac%a1%e7%9a%84%e4%b8%ad%e7%bb%a7%e8%bf%9e%e6%8e%a5%e5%ae%9e%e7%8e%b0%e7%9a%84%e9%a1%b5%e9%9d%a2%e5%88%86%e9%a1%b5%e5%8a%9f%e8%83%bd%e3%80%82\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e9%80%9a%e8%bf%87%e9%a6%96%e6%ac%a1%e7%9a%84%e4%b8%ad%e7%bb%a7%e8%bf%9e%e6%8e%a5%e5%ae%9e%e7%8e%b0%e7%9a%84%e9%a1%b5%e9%9d%a2%e5%88%86%e9%a1%b5%e5%8a%9f%e8%83%bd%e3%80%82\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.silicloud.com\/zh\/blog\/"},{"@type":"ListItem","position":2,"name":"\u901a\u8fc7\u9996\u6b21\u7684\u4e2d\u7ee7\u8fde\u63a5\u5b9e\u73b0\u7684\u9875\u9762\u5206\u9875\u529f\u80fd"}]},{"@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\/f044a4b7fa4ee2701702942002419ca6","name":"\u96c5, \u609f","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e71a913e914f1aad1efc391f92084294bac54bc782acd289638580134cf667a6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e71a913e914f1aad1efc391f92084294bac54bc782acd289638580134cf667a6?s=96&d=mm&r=g","caption":"\u96c5, \u609f"},"url":"https:\/\/www.silicloud.com\/zh\/blog\/author\/yawu\/"},{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e9%80%9a%e8%bf%87%e9%a6%96%e6%ac%a1%e7%9a%84%e4%b8%ad%e7%bb%a7%e8%bf%9e%e6%8e%a5%e5%ae%9e%e7%8e%b0%e7%9a%84%e9%a1%b5%e9%9d%a2%e5%88%86%e9%a1%b5%e5%8a%9f%e8%83%bd%e3%80%82\/#local-main-organization-logo","url":"","contentUrl":"","caption":"Blog - Silicon Cloud"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/48030","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\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/comments?post=48030"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/48030\/revisions"}],"predecessor-version":[{"id":94650,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/48030\/revisions\/94650"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/media?parent=48030"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/categories?post=48030"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/tags?post=48030"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}