{"id":48037,"date":"2023-09-09T18:14:53","date_gmt":"2023-12-09T01:18:25","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8graphcool%e3%80%81react%e5%92%8capollo%e6%9d%a5%e5%ae%9e%e7%8e%b0graphql%e7%9a%84%e6%9f%a5%e8%af%a2%e5%92%8c%e5%8f%98%e6%9b%b4%e3%80%82\/"},"modified":"2024-05-03T22:55:27","modified_gmt":"2024-05-03T14:55:27","slug":"%e4%bd%bf%e7%94%a8graphcool%e3%80%81react%e5%92%8capollo%e6%9d%a5%e5%ae%9e%e7%8e%b0graphql%e7%9a%84%e6%9f%a5%e8%af%a2%e5%92%8c%e5%8f%98%e6%9b%b4%e3%80%82","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8graphcool%e3%80%81react%e5%92%8capollo%e6%9d%a5%e5%ae%9e%e7%8e%b0graphql%e7%9a%84%e6%9f%a5%e8%af%a2%e5%92%8c%e5%8f%98%e6%9b%b4%e3%80%82\/","title":{"rendered":"\u4f7f\u7528Graphcool\u3001React\u548cApollo\u6765\u5b9e\u73b0GraphQL\u7684\u67e5\u8be2\u548c\u53d8\u66f4"},"content":{"rendered":"

\u9996\u5148<\/h2>\n

\u867d\u7136\u8fd9\u7bc7\u6587\u7ae0\u7684\u90e8\u5206\u5185\u5bb9\u4e0e\u4e4b\u524d\u7684\u6709\u91cd\u590d\uff0c\u4f46\u6211\u5e0c\u671b\u80fd\u591f\u8be6\u7ec6\u8bf4\u660e\u5982\u4f55\u4f7f\u7528Graphcool\u5728\u4f7f\u7528create-react-app\u521b\u5efa\u7684React\u5e94\u7528\u7a0b\u5e8f\u4e2d\u5b9e\u73b0GraphQL\u7684Query\u548cMutation\uff0c\u800c\u4e0d\u9700\u8981\u518d\u89e3\u91caGraphcool\u672c\u8eab\u3002<\/p>\n

\u5728\u8fd9\u4e2a\u5e94\u7528\u7a0b\u5e8f\u4e2d\uff0c\u6211\u4eec\u8981\u6c42\u521b\u5efa\u4ee5\u4e0b\u7c7b\u578b\u7684\u5c4f\u5e55\uff0c\u80fd\u591f\u7b80\u5355\u5730\u5217\u51fa\u6587\u7ae0\u4fe1\u606f\u5e76\u4fdd\u5b58\u65b0\u7684\u6295\u7a3f\u3002
\n\uff08\u7531\u4e8e\u8fd9\u53ea\u662f\u4e3a\u4e86\u4f53\u9a8cGraphQL\u7684\u529f\u80fd\u800c\u521b\u5efa\u7684\uff0c\u6240\u4ee5\u6ca1\u6709\u8fdb\u884c\u592a\u591a\u7ec6\u81f4\u7684\u9519\u8bef\u5904\u7406\u6216\u9488\u5bf9\u4ea7\u54c1\u7684\u4f18\u5316…\uff09<\/p>\n

\u5b8c\u6210\u7684\u5f62\u8c61 de<\/h3>\n
\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2018-03-26-2.38.44.png\"<\/div>\n

\u6267\u884c\u73af\u5883<\/h2>\n
    \n
  • \n
      Mac OS Sierra: v10.12.6<\/ul>\n<\/li>\n<\/ul>\n

       <\/p>\n

        \n
      • \n
          node: v8.2.0<\/ul>\n<\/li>\n<\/ul>\n

           <\/p>\n

            npm: v5.3.0<\/ul>\n

            \u4e8b\u524d\u51c6\u5907<\/h2>\n

            \u5b89\u88c5create-react-app<\/h3>\n
            npm install<\/span> -g<\/span> create-react-app\r\n<\/code><\/pre>\n
            \u5b89\u88c5Graphcool\uff08Graphcool\u7684\u547d\u4ee4\u884c\u754c\u9762\uff09<\/h3>\n
            npm install<\/span> -g<\/span> graphcool\r\n<\/code><\/pre>\n
            \u4f7f\u7528 Graphcool \u767b\u5f55\uff08\u672c\u5730\u73af\u5883\u7684\u8ba4\u8bc1\uff09<\/h3>\n
            \u5982\u679c\u5c1a\u672a\u521b\u5efaGraphcool\u8d26\u6237\uff0c\u5219\u8bf7\u4ece\u5b98\u65b9\u7f51\u7ad9\u4e0a\u6ce8\u518c\u5e76\u521b\u5efa\u4e00\u4e2a\u8d26\u6237\uff0c\u7136\u540e\u6267\u884c\u4ee5\u4e0b\u547d\u4ee4\u3002<\/p>\n
            graphcool login\r\n<\/code><\/pre>\n
            \u6210\u529f\u767b\u5f55\u540e\uff0c\u5c06\u5728\u4e3b\u76ee\u5f55\u4e0b\u81ea\u52a8\u751f\u6210.graphcoolrc\u6587\u4ef6\u3002<\/p>\n
            \u521b\u5efa\u5e76\u786e\u8ba4React\u5e94\u7528\u7a0b\u5e8f\u7684\u542f\u52a8<\/h2>\n
            # \u30db\u30fc\u30e0\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b\u79fb\u52d5<\/span>\r\ncd<\/span> ~\/\r\n# `react-graphcool-sample`\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3092\u4f5c\u6210\u3057\u3001React\u30a2\u30d7\u30ea\u306e\u571f\u53f0\u3092\u4f5c\u308b<\/span>\r\ncreate-react-app react-graphcool-sample\r\n# react-graphcool-sample\u306e\u30eb\u30fc\u30c8\u306b\u79fb\u52d5<\/span>\r\ncd <\/span>react-graphcool-sample\/\r\n# React\u30a2\u30d7\u30ea\u306e\u8d77\u52d5\u3092\u78ba\u8a8d<\/span>\r\nyarn start\r\n<\/code><\/pre>\n
            \u5efa\u7acbGraphcool\u73af\u5883<\/h2>\n
            \u786e\u8ba4\u80fd\u591f\u542f\u52a8React\u5e94\u7528\u540e\uff0c\u6253\u5f00\u53e6\u4e00\u4e2a\u7ec8\u7aef\uff0c\u5e76\u8fdb\u5165react-graphcool-sample\u7684\u6839\u76ee\u5f55\uff0c\u4f7f\u7528graphcool init\u547d\u4ee4\u5728\u540d\u4e3aserver\uff08\u4e5f\u53ef\u4ee5\u662f\u4efb\u610f\u540d\u79f0\uff09\u7684\u76ee\u5f55\u5185\u521b\u5efa\u7528\u4e8e\u4f7f\u7528Graphcool\u7684\u6587\u4ef6\u3002<\/p>\n
            cd<\/span> ~\/react-graphcool-sample\/\r\ngraphcool init server\r\n<\/code><\/pre>\n
            \u4e3b\u8981\u521b\u5efa\u4e86\u4ee5\u4e0b\u4e09\u4e2a\u8981\u70b9\u3002<\/p>\n
              \n
            • \n
                graphcool.yml\u200a\uff08\u200aGraphcool\u3092\u5229\u7528\u3059\u308b\u305f\u3081\u306e\u8a2d\u5b9a\u30d5\u30a1\u30a4\u30eb\u3002\u4f5c\u6210\u3057\u305f\u578b\u5b9a\u7fa9\u30d5\u30a1\u30a4\u30eb\u3084serverless function\u306e\u53c2\u7167\u3001\u30d1\u30fc\u30df\u30c3\u30b7\u30e7\u30f3\u306e\u6307\u5b9a\u306a\u3069\uff09<\/ul>\n<\/li>\n<\/ul>\n
                 <\/p>\n
                  \n
                • \n
                    types.graphql\u200a\uff08GraphQL\u306e\u30b9\u30ad\u30fc\u30de\u5b9a\u7fa9\u30d5\u30a1\u30a4\u30eb\uff09<\/ul>\n<\/li>\n<\/ul>\n
                     <\/p>\n
                      src\/\uff08serverless function\u304c\u683c\u7d0d\u3055\u308c\u305f\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\uff09<\/ul>\n
                      types.graphql\uff08\u6a21\u5f0f\u5b9a\u4e49\uff09<\/h3>\n
                      \u6211\u5011\u5c07\u7de8\u8f2ftypes.graphql\u6587\u4ef6\uff0c\u6dfb\u52a0\u4e0b\u9762\u7684\u578b\u5225\u5b9a\u7fa9Post\u3002\uff08\u5c07\u539f\u5148\u7684User\u578b\u5225\u7b49\u8a3b\u91cb\u6389\uff0c\u53ea\u4fdd\u7559Post\u7684\u578b\u5225\uff09<\/p>\n
                      type<\/span> Post<\/span> @<\/span>model<\/span> {<\/span>\r\n  id<\/span>:<\/span> ID<\/span>!<\/span> @<\/span>isUnique<\/span>\r\n  title<\/span>:<\/span> String<\/span>!<\/span>\r\n  content<\/span>:<\/span> String<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
                      \u5728type\u4e2d\u58f0\u660e\u7c7b\u578b\uff0c\u5e76\u5728\u6bcf\u4e2a\u5b57\u6bb5\u7684\u5192\u53f7\u540e\u9762\u4f7f\u7528ID\u6216String\u6307\u793a\u8fd9\u4e9b\u5b57\u6bb5\u7684\u7c7b\u578b\u3002
                      \n\uff01\u6307\u5b9a\u5b83\u4eec\u4e3aNot Null\u3002
                      \n\u6709\u5173\u8fd9\u4e9b\u7c7b\u578b\u548c\u6a21\u5f0f\u7684\u8be6\u7ec6\u4fe1\u606f\uff0c\u8bf7\u53c2\u9605GraphQL\u5b98\u65b9\u7f51\u9875\u3002<\/p>\n
                      \u6b64\u5916\uff0c\u5e26\u6709@\u7684\u88ab\u79f0\u4e3a\u6307\u4ee4\uff08Directive\uff09\uff0c\u7528\u4e8e\u5bf9\u5b57\u6bb5\u8fdb\u884c\u7279\u6b8a\u8bbe\u7f6e\uff08\u5728\u4e0a\u8ff0\u793a\u4f8b\u4e2d\uff0c\u5c06\u503c\u5b58\u50a8\u5728id\u5b57\u6bb5\u4e2d\u5e76\u786e\u4fdd\u552f\u4e00\u6027\uff09\u3002\u66f4\u8be6\u7ec6\u7684\u4fe1\u606f\uff0c\u8bf7\u53c2\u8003\u5b98\u65b9\u7684\u6307\u4ee4\u7ae0\u8282\u3002<\/p>\n
                      graphcool.yml\uff08\u6307\u5b9a\u6743\u9650\u7b49\uff09<\/h3>\n
                      \u8fd9\u6b21\u4e0d\u4f7f\u7528\u65e0\u670d\u52a1\u5668\u51fd\u6570\uff0c\u53ea\u4fdd\u7559\u4e0b\u9762\u7684\u5185\u5bb9\uff0c\u5176\u4ed6\u7684\u90fd\u6ce8\u91ca\u6389\u3002<\/p>\n
                      types<\/span>:<\/span> .\/types.graphql<\/span>\r\npermissions<\/span>:<\/span>\r\n  -<\/span> operation<\/span>:<\/span> \"<\/span>*\"<\/span>\r\n<\/code><\/pre>\n
                      \u8bf7\u63d0\u4f9b\u4ee5\u4e0b\u5185\u5bb9\u7684\u4e2d\u6587\u672c\u5730\u5316\u91ca\u4e49\uff0c\u4ec5\u9700\u4e00\u79cd\u9009\u9879\uff1a<\/h3>\n
                      \/\u6e90\u4ee3\u7801<\/p>\n
                      \u5220\u9664 react-graphcool-sample\/server\/src \u4e0b\u7684 src \u6587\u4ef6\u5939\u3002<\/p>\n
                      \u53d1\u5e03Graphcool<\/h3>\n
                      \u8fdb\u5165\u7531graphcool init\u521b\u5efa\u7684\u76ee\u5f55\uff0c\u5e76\u6267\u884cgraphcool deploy\u547d\u4ee4\uff0c\u5c06\u4e0a\u8ff0\u914d\u7f6e\u90e8\u7f72\u5230Graphcool\u7684\u670d\u52a1\u4e0a\u3002
                      \n\u6bcf\u5f53\u6709\u5bf9\u6a21\u5f0f\u7b49\u7684\u66f4\u6539\u65f6\uff0c\u90fd\u9700\u8981\u6267\u884c\u76f8\u540c\u7684\u547d\u4ee4\u6765\u5e94\u7528\u66f4\u6539\u3002<\/p>\n
                      # server\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b\u79fb\u52d5<\/span>\r\ncd <\/span>server\r\ngraphcool deploy\r\n<\/code><\/pre>\n
                      \u6267\u884cgraphcool deploy\u547d\u4ee4\u65f6\u4f1a\u8be2\u95ee\u4ee5\u4e0b\u4e09\u4e2a\u95ee\u9898\uff1a
                      \n\u5728\u7b2c\u4e00\u4e2a\u95ee\u9898\u4e2d\uff0c\u4f1a\u8981\u6c42\u60a8\u6307\u5b9aShared Clusters\uff08\u514d\u8d39\u4e91\u6258\u7ba1\u670d\u52a1\uff09\u7684\u9009\u62e9\uff0c\u8bf7\u9009\u62e9\u5176\u4e2d\u7684\u67d0\u4e2a\u5730\u533a\u3002
                      \n\u5982\u679c\u6ca1\u6709\u7279\u522b\u8981\u6c42\uff0c\u60a8\u53ef\u4ee5\u6309\u4e0bEnter\u952e\u7ee7\u7eed\u4f7f\u7528\u9ed8\u8ba4\u9009\u9879\u3002<\/p>\n
                      ? Please choose the cluster you want to deploy to (<\/span>Use arrow keys)<\/span>\r\n\r\n  Shared Clusters:\r\n\u276f shared-eu-west-1 \r\n  shared-ap-northeast-1 \r\n  shared-us-west-2 \r\n<\/code><\/pre>\n
                      \u63a5\u4e0b\u6765\uff0c\u4f1a\u95ee\u60a8\u76ee\u6807\u540d\u79f0\uff0c\u5982\u679c\u6ca1\u6709\u7279\u522b\u8981\u6c42\uff0c\u53ea\u9700\u6309\u4e0b\u56de\u8f66\u952e\uff0c\u9ed8\u8ba4\u5c06\u5e94\u7528prod \u7684\u8bbe\u7f6e\u3002<\/p>\n
                      ? Please choose the target name (<\/span>prod)<\/span> \r\n<\/code><\/pre>\n
                      \u63a5\u4e0b\u6765\uff0c\u4f1a\u95ee\u5230\u670d\u52a1\u540d\u79f0\uff0c\u4f46\u9ed8\u8ba4\u60c5\u51b5\u4e0b\u5c06\u5e94\u7528\u76ee\u5f55\u540d\u3002<\/p>\n
                      ? Please choose the service name (<\/span>server)<\/span> \r\n<\/code><\/pre>\n
                      \u6210\u529f\u90e8\u7f72\u540e\uff0c\u4f60\u53ef\u4ee5\u4ece\u4e91\u63a7\u5236\u53f0\u4e0a\u786e\u8ba4\u76f8\u5e94\u7684\u9879\u76ee\u3002
                      \n\u786e\u8ba4\u7528\u7684URL\u662f\u5728https:\/\/console.graph.cool\/\u540e\u9762\uff0c\u6307\u5b9a\u7531graphcool init\u521b\u5efa\u7684\u76ee\u5f55\u540d\u3002
                      \n\u5728\u4e0a\u8ff0\u793a\u4f8b\u4e2d\uff0c\u5b83\u5c06\u53d8\u4e3ahttps:\/\/console.graph.cool\/server\/\u3002
                      \n\uff08\u8bbf\u95ee\u63a7\u5236\u53f0\u4e4b\u524d\uff0c\u4f60\u9700\u8981\u5148\u767b\u5f55Graphcool)<\/p>\n
                      \u60a8\u53ef\u4ee5\u901a\u8fc7\u6b64\u63a7\u5236\u53f0\u6dfb\u52a0\u6570\u636e\u3001\u786e\u8ba4\u7ec8\u7aef\u8282\u70b9\u5e76\u5220\u9664\u9879\u76ee\u7b49\u3002<\/p>\n
                      \u53e6\u5916\uff0c\u5982\u679c\u90e8\u7f72\u6210\u529f\uff0cgraphcool init \u4f1a\u5728\u521b\u5efa\u7684\u76ee\u5f55\u5185\u751f\u6210\u5982\u4e0b\u6240\u793a\u7684\u8fde\u63a5\u5230Graphcool\u7684\u8bbe\u7f6e\u6587\u4ef6\u3002<\/p>\n
                      targets:\r\n  prod: shared-eu-west-1\/xxxxxxxxxxxxxxxxxxxxxxxx\r\n  default: prod\r\n<\/code><\/pre>\n
                      xxxxxxxxxxxxxxxxxxxxxxxx\u7684\u90e8\u5206\u662f\u6307\u9879\u76eeID\uff0c\u4e0b\u6b21\u6267\u884cgraphcool deploy\u65f6\uff0c\u5c06\u57fa\u4e8e\u8fd9\u4e9b\u4fe1\u606f\u53bb\u8fde\u63a5\u5230Graphcool\u670d\u52a1\u3002\uff08\u9879\u76eeID\u4e5f\u53ef\u4ee5\u5728\u63a7\u5236\u53f0\u4e0a\u786e\u8ba4\uff09<\/p>\n
                      \u83b7\u53d6\u7aef\u70b9<\/h3>\n
                      \u5728\u90e8\u7f72\u5b8c\u6210\u65f6\u663e\u793a\u7684\u6d88\u606f\u672b\u5c3e\uff0c\u6211\u4eec\u4f1a\u4f7f\u7528Simple API\u7684\u503c\u6765\u8bbe\u7f6e\u540e\u7eed\u8fde\u63a5React\u5e94\u7528\u7a0b\u5e8f\u7684API\u914d\u7f6e\uff0c\u6240\u4ee5\u8bf7\u4fdd\u7559\u4e00\u4efd\u5907\u4efd\u3002
                      \n\uff08\u5373\u4f7f\u5fd8\u8bb0\u4e86\uff0c\u60a8\u53ef\u4ee5\u5728server\u6587\u4ef6\u5939\u4e2d\u8fd0\u884cgraphcool info\u547d\u4ee4\uff0c\u5c31\u53ef\u4ee5\u786e\u8ba4\u4ee5\u4e0b\u7684\u7aef\u70b9\uff09<\/p>\n
                      $ graphcool info\r\n\r\nService Name   Cluster \/ Service ID\r\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nserver   shared-eu-west-1\/xxx\r\n\r\nAPI:           Endpoint:\r\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n  Simple API:        https:\/\/api.graph.cool\/simple\/v1\/xxxxx\r\n  Relay API:         https:\/\/api.graph.cool\/relay\/v1\/xxxxx\r\n  Subscriptions API: wss:\/\/subscriptions.graph.cool\/v1\/xxxxx\r\n<\/code><\/pre>\n
                      \u963f\u6ce2\u7f57\u7684\u5185\u7f6e\u8fde\u63a5\u8bbe\u7f6e\u3002<\/h2>\n
                      \u5b89\u88c5Apollo\u5ba2\u6237\u7aef\u5e93\uff0c\u8be5\u5e93\u662f\u7528\u4e8e\u8fde\u63a5GraphQL API\u7684\u3002\u7136\u540e\u5c06\u5176\u96c6\u6210\u5230React\u5e94\u7528\u7a0b\u5e8f\u4e2d\uff0c\u5e76\u8fdb\u884cAPI\u8fde\u63a5\u8bbe\u7f6e\u3002<\/p>\n
                      \u963f\u6ce2\u7f57\u5b89\u88c5<\/h3>\n
                      \u6211\u4eec\u6765\u5b89\u88c5\u4ee5\u4e0b\u56db\u4e2a\u8f6f\u4ef6\u5305\u3002<\/p>\n
                      yarn add apollo-client-preset react-apollo graphql-tag graphql\r\n<\/code><\/pre>\n
                      \u5728\u5b89\u88c5\u5b8c\u5305\u540e\uff0c\u4e3a\u4e86\u4f7fReact\u5e94\u7528\u7a0b\u5e8f\u80fd\u591f\u4f7f\u7528\uff0c\u5c06\u4e0b\u9762\u7684\u63cf\u8ff0\u6dfb\u52a0\u5230src\/index.js\u7684\u5f00\u5934\u3002<\/p>\n
                      import<\/span> {<\/span> ApolloProvider<\/span> }<\/span> from<\/span> \"<\/span>react-apollo<\/span>\"<\/span>;<\/span>\r\nimport<\/span> {<\/span> ApolloClient<\/span> }<\/span> from<\/span> \"<\/span>apollo-client<\/span>\"<\/span>;<\/span>\r\nimport<\/span> {<\/span> HttpLink<\/span>,<\/span> InMemoryCache<\/span> }<\/span> from<\/span> \"<\/span>apollo-client-preset<\/span>\"<\/span>;<\/span>\r\n<\/code><\/pre>\n
                      API\u8fde\u63a5\u8bbe\u7f6e<\/h3>\n
                      \u63a5\u4e0b\u6765\uff0c\u6211\u4eec\u5c06\u901a\u8fc7\u4ee5\u4e0b\u4ee3\u7801\u751f\u6210\u4e00\u4e2a\u5e26\u6709API\u8fde\u63a5\u4fe1\u606f\u7684ApolloClient\u5b9e\u4f8b\u3002\u5c06GRAPHQL_ENDPOINT\u66ff\u6362\u4e3a\u4e4b\u524d\u4fdd\u5b58\u7684Simple API\u7684\u503c\u3002<\/p>\n
                      const<\/span> GRAPHQL_ENDPOINT<\/span> =<\/span>  \"\"<\/span>;<\/span> \/\/ Simple API\u306e\u5024\u3092\u4ee3\u5165<\/span>\r\n\r\nif<\/span> (<\/span>!<\/span>GRAPHQL_ENDPOINT<\/span>)<\/span> {<\/span>\r\n  throw<\/span> Error<\/span>(<\/span>\"<\/span>GRAPHQL_ENDPOINT\u304c\u8a2d\u5b9a\u3055\u308c\u3066\u3044\u307e\u305b\u3093\u3002<\/span>\"<\/span>);<\/span>\r\n}<\/span>\r\nconst<\/span> client<\/span> =<\/span> new<\/span> ApolloClient<\/span>({<\/span>\r\n  link<\/span>:<\/span> new<\/span> HttpLink<\/span>({<\/span>\r\n    uri<\/span>:<\/span> GRAPHQL_ENDPOINT<\/span>\r\n  }),<\/span>\r\n  cache<\/span>:<\/span> new<\/span> InMemoryCache<\/span>()<\/span>\r\n});<\/span>\r\n<\/code><\/pre>\n
                      \u5c06\u4e0a\u8ff0\u5b9e\u4f8b\u4f20\u9012\u7ed9\u7684Props\uff0c\u7136\u540e\u5c06AppComponent\u5305\u88c5\u5728ApolloApp\u7ec4\u4ef6\u4e2d\u8fdb\u884c\u6700\u7ec8\u6e32\u67d3\u3002<\/p>\n
                      const<\/span> ApolloApp<\/span> =<\/span> (<\/span>\r\n  <<\/span>ApolloProvider<\/span> client<\/span>=<\/span>{<\/span>client<\/span>}<\/span>><\/span>\r\n    <<\/span>App<\/span> \/><\/span>\r\n  <<\/span>\/ApolloProvider<\/span>>\r\n<\/span>);<\/span>\r\n\r\nReactDOM<\/span>.<\/span>render<\/span>(<\/span>ApolloApp<\/span>,<\/span> document<\/span>.<\/span>getElementById<\/span>(<\/span>\"<\/span>root<\/span>\"<\/span>));<\/span>\r\nregisterServiceWorker<\/span>();<\/span>\r\n\r\n<\/code><\/pre>\n
                      \u521b\u5efaReact\u7ec4\u4ef6<\/h2>\n
                      \u6211\u5011\u5275\u5efa\u4e86\u4e00\u500b\u7528\u65bc\u5217\u51fa\u548c\u767c\u5e03\u65b0\u805e\u4fe1\u606f\u7684UI\u7d44\u4ef6\u3002<\/p>\n
                      \u5728src\u6587\u4ef6\u5939\u7684\u6839\u76ee\u5f55\u4e0b\u521b\u5efa\u4e00\u4e2acomponents\u6587\u4ef6\u5939\uff0c\u5e76\u5c06Component\u6587\u4ef6\u5b58\u653e\u5728\u5176\u4e2d\u3002
                      \n\uff08\u5c06App\u7ec4\u4ef6\u4e5f\u79fb\u52a8\u5230components\u6587\u4ef6\u5939\u4e2d\uff09<\/p>\n
                      \u4ee5\u4e0b\u662f\u8be5\u6bb5\u6587\u672c\u7684\u4e2d\u6587\u7ffb\u8bd1\uff1a<\/p>\n
                      \u251c public
                      \n\u251c server
                      \n\u2514 src
                      \n\u2514 components
                      \n\u251c App.js\uff1a\u6e32\u67d3PostList\u548cPostForm\u7ec4\u4ef6
                      \n\u251c Post.js\uff1a\u6e32\u67d3\u5355\u4e2a\u6587\u7ae0\u7684\u4fe1\u606f\uff08\u6807\u9898\u548c\u5185\u5bb9\uff09
                      \n\u251c PostList.js\uff1a\u901a\u8fc7\u67e5\u8be2\u83b7\u53d6\u6240\u6709\u6587\u7ae0\uff0c\u5e76\u4f7f\u7528\u6e32\u67d3\u6bcf\u7bc7\u6587\u7ae0\u7684\u4fe1\u606f
                      \n\u2514 PostForm.js\uff1a\u901a\u8fc7\u53d8\u66f4\u6dfb\u52a0\u4fdd\u5b58\u65b0\u6587\u7ae0\u7684\u4fe1\u606f<\/p>\n
                      \u53d1\u5e03\uff08\u6587\u7ae0\u4fe1\u606f\u663e\u793a\uff09<\/h3>\n
                      \u4e3a\u4e86\u8fdb\u884cProps\u7684\u7c7b\u578b\u68c0\u67e5\uff0c\u9700\u8981\u5b89\u88c5prop-types\u5e93\u3002<\/p>\n
                      yarn add -D prop-types\r\n<\/code><\/pre>\n
                      import<\/span> React<\/span>,<\/span> {<\/span> Component<\/span> }<\/span> from<\/span> \"<\/span>react<\/span>\"<\/span>;<\/span>\r\nimport<\/span> PropTypes<\/span> from<\/span> \"<\/span>prop-types<\/span>\"<\/span>;<\/span>\r\n\r\nclass<\/span> Post<\/span> extends<\/span> Component<\/span> {<\/span>\r\n  render<\/span>()<\/span> {<\/span>\r\n    return<\/span> (<\/span>\r\n      <<\/span>dl<\/span>><\/span>\r\n        <<\/span>dt<\/span>><\/span>{<\/span>this<\/span>.<\/span>props<\/span>.<\/span>post<\/span>.<\/span>title<\/span>}<\/span><<\/span>\/dt<\/span>>\r\n<\/span>        <<\/span>dd<\/span>><\/span>{<\/span>this<\/span>.<\/span>props<\/span>.<\/span>post<\/span>.<\/span>content<\/span>}<\/span><<\/span>\/dd<\/span>>\r\n<\/span>      <<\/span>\/dl<\/span>>\r\n<\/span>    );<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n\r\nPost<\/span>.<\/span>propTypes<\/span> =<\/span> {<\/span>\r\n  post<\/span>:<\/span> PropTypes<\/span>.<\/span>shape<\/span>({<\/span>\r\n    id<\/span>:<\/span> PropTypes<\/span>.<\/span>string<\/span>,<\/span>\r\n    title<\/span>:<\/span> PropTypes<\/span>.<\/span>string<\/span>,<\/span>\r\n    content<\/span>:<\/span> PropTypes<\/span>.<\/span>string<\/span>\r\n  })<\/span>\r\n};<\/span>\r\n\r\nexport<\/span> default<\/span> Post<\/span>;<\/span>\r\n\r\n<\/code><\/pre>\n
                      \u5e16\u5b50\u5217\u8868\uff08\u83b7\u53d6\u548c\u5217\u51fa\u6587\u7ae0\u4fe1\u606f\uff09<\/h3>\n
                      \u4e3a\u4e86\u4eceGraphQL\u83b7\u53d6\u6240\u6709\u6587\u7ae0\u6570\u636e\uff0c\u6211\u4eec\u5c06\u7f16\u5199\u4ee5\u4e0b\u67e5\u8be2\u8bed\u53e5\u3002<\/p>\n
                        query {\r\n    allPosts {\r\n      id\r\n      title\r\n      content\r\n    }\r\n  }\r\n<\/code><\/pre>\n
                      \u60a8\u53ef\u4ee5\u901a\u8fc7\u5728\u6d4f\u89c8\u5668\u7684\u63a7\u5236\u53f0\u4e2d\u8bbf\u95ee\u6216\u8005\u5728\u901a\u8fc7graphcool init\u521b\u5efa\u7684\u76ee\u5f55\u4e2d\u8fd0\u884cgraphcool playground\u547d\u4ee4\u6765\u6253\u5f00Playground\uff0c\u5e76\u8bd5\u7528\u6b64\u67e5\u8be2\u7684\u6267\u884c\u7ed3\u679c\u3002<\/p>\n
                      \"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8<\/div>\n
                      \u5982\u679c\u60a8\u60f3\u4e86\u89e3\u66f4\u591a\u5173\u4e8e\u67e5\u8be2API\u7684\u4fe1\u606f\uff0c\u4f8b\u5982\u6307\u5b9a\u6587\u7ae0ID\u6765\u83b7\u53d6\u5355\u4e2a\u6587\u7ae0\u7684\u8be6\u7ec6\u4fe1\u606f\uff0c\u8bf7\u53c2\u8003\u6b64\u5904\u3002<\/p>\n
                      gql\u662freact-apollo\u7684\u8f85\u52a9\u51fd\u6570\uff0c\u7528\u4e8e\u89e3\u6790\u5b57\u7b26\u4e32\u5e76\u6267\u884cGraphQL\u64cd\u4f5c\u3002<\/p>\n
                      import<\/span> React<\/span>,<\/span> {<\/span> Component<\/span>,<\/span> Fragment<\/span> }<\/span> from<\/span> \"<\/span>react<\/span>\"<\/span>;<\/span>\r\nimport<\/span> Post<\/span> from<\/span> \"<\/span>.\/Post<\/span>\"<\/span>;<\/span>\r\n\r\nimport<\/span> gql<\/span> from<\/span> \"<\/span>graphql-tag<\/span>\"<\/span>;<\/span>\r\nimport<\/span> {<\/span> graphql<\/span> }<\/span> from<\/span> \"<\/span>react-apollo<\/span>\"<\/span>;<\/span>\r\n\r\nconst<\/span> ALL_POSTS_QUERY<\/span> =<\/span> gql<\/span>`\r\n  query {\r\n    allPosts {\r\n      id\r\n      title\r\n      content\r\n    }\r\n  }\r\n`<\/span>;<\/span>\r\n\r\nclass<\/span> PostList<\/span> extends<\/span> Component<\/span> {<\/span>\r\n  render<\/span>()<\/span> {<\/span>\r\n    if<\/span> (<\/span>this<\/span>.<\/span>props<\/span>.<\/span>allPostsQuery<\/span> &&<\/span> this<\/span>.<\/span>props<\/span>.<\/span>allPostsQuery<\/span>.<\/span>loading<\/span>)<\/span> {<\/span>\r\n      return<\/span> <<\/span>p<\/span>><\/span>\u30c7\u30fc\u30bf\u3092\u8aad\u307f\u8fbc\u307f\u4e2d<\/span><<\/span>\/p><\/span>;\r\n<\/span>    }<\/span>\r\n\r\n    if<\/span> (<\/span>this<\/span>.<\/span>props<\/span>.<\/span>allPostsQuery<\/span> &&<\/span> this<\/span>.<\/span>props<\/span>.<\/span>allPostsQuery<\/span>.<\/span>error<\/span>)<\/span> {<\/span>\r\n      return<\/span> <<\/span>p<\/span>><\/span>\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u307e\u3057\u305f<\/span>\u3002<\/span><<\/span>\/p><\/span>;\r\n<\/span>    }<\/span>\r\n\r\n    const<\/span> allPosts<\/span> =<\/span> this<\/span>.<\/span>props<\/span>.<\/span>allPostsQuery<\/span>.<\/span>allPosts<\/span>;<\/span>\r\n    if<\/span> (<\/span>allPosts<\/span>.<\/span>length<\/span> ===<\/span> 0<\/span>)<\/span> {<\/span>\r\n      return<\/span> <<\/span>p<\/span>><\/span>\u6295\u7a3f\u304c\u3042\u308a\u307e\u305b\u3093<\/span>\u3002<\/span><<\/span>\/p><\/span>;\r\n<\/span>    }<\/span>\r\n\r\n    return<\/span> (<\/span>\r\n      <<\/span>Fragment<\/span>><\/span>\r\n        {<\/span>allPosts<\/span>.<\/span>map<\/span>(<\/span>post<\/span> =><\/span> <<\/span>Post<\/span> key<\/span>=<\/span>{<\/span>post<\/span>.<\/span>id<\/span>}<\/span> post<\/span>=<\/span>{<\/span>post<\/span>}<\/span> \/><\/span>)<\/span>}\r\n<\/span>      <<\/span>\/Fragment<\/span>>\r\n<\/span>    );<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n\r\nexport<\/span> default<\/span> graphql<\/span>(<\/span>ALL_POSTS_QUERY<\/span>,<\/span> {<\/span> name<\/span>:<\/span> \"<\/span>allPostsQuery<\/span>\"<\/span> })(<\/span>PostList<\/span>);<\/span>\r\n\r\n<\/code><\/pre>\n
                      graphql\u51fd\u6570\uff08react-apollo\u7684\u8f85\u52a9\u51fd\u6570\uff09\u63a5\u53d7\u89e3\u6790\u540e\u7684\u67e5\u8be2\uff08ALL_POSTS_QUERY\uff09\u4f5c\u4e3a\u7b2c\u4e00\u4e2a\u53c2\u6570\uff0c\u4f20\u9012\u4e00\u4e2a\u6307\u5b9a\u5b58\u50a8\u4eceGraphQL API\u83b7\u53d6\u7684\u6570\u636e\u7684Props\u540d\u79f0\uff08allPostsQuery\uff09\u7684\u5bf9\u8c61\u4f5c\u4e3a\u7b2c\u4e8c\u4e2a\u53c2\u6570\uff0c\u5e76\u63a5\u53d7\u4e00\u4e2a\u7ec4\u4ef6\u4f5c\u4e3a\u53c2\u6570\uff0c\u8fd4\u56de\u4e00\u4e2a\u6269\u5c55\u4e86\u7684\u7ec4\u4ef6\u7684\u51fd\u6570\uff08\u9ad8\u9636\u7ec4\u4ef6\uff09\u3002<\/p>\n
                      \u7b80\u800c\u8a00\u4e4b\uff0c\u5c06 graphql(ALL_POSTS_QUERY, { name: “allPostsQuery” }) \u4f5c\u4e3a HoC\uff0c\u5c06 PostList \u4f5c\u4e3a\u53c2\u6570\u4f20\u5165\uff0c\u5e76\u6700\u7ec8\u5bfc\u51fa\u6269\u5c55\u540e\u7684 PostList\u3002<\/p>\n
                      \u6b64\u5916\uff0c\u7531\u4e8eApolloProvider\u5bf9\u6839\u7ec4\u4ef6App\u8fdb\u884c\u4e86\u5305\u88c5\uff0c\u56e0\u6b64App\u7684\u5b50\u7ec4\u4ef6PostList\u53ef\u4ee5\u901a\u8fc7Props\uff08props.allPostsQuery\uff09\u83b7\u53d6\u4eceGraphQL API\u83b7\u53d6\u7684\u6570\u636e\u3002<\/p>\n
                      props.allPostsQuery\u4e2d\u542b\u6709\u4ee5JSON\u683c\u5f0f\u5b58\u50a8\u7684\u83b7\u53d6\u7ed3\u679c\u6570\u636e\u3002
                      \n\u4ece\u5f00\u59cb\u83b7\u53d6\u6570\u636e\u5230\u5b8c\u6210\u7684\u8fc7\u7a0b\u4e2d\uff0cloading\u7684\u503c\u4e3atrue\uff0c\u5982\u679c\u83b7\u53d6\u6570\u636e\u5931\u8d25\uff0c\u5219error\u7684\u503c\u4e3aError\u5bf9\u8c61\uff0c\u56e0\u6b64\u5728render()\u7684\u5f00\u59cb\u90e8\u5206\u5904\u7406\u8fd9\u4e9b\u60c5\u51b5\u7684\u5904\u7406\u3002<\/p>\n
                      \u6587\u7ae0\u6dfb\u52a0\u8868\u5355.js (PostForm.js)<\/h3>\n
                      \u5728PostList\u4e2d\uff0c\u4f7f\u7528\u67e5\u8be2(query)\u6765\u68c0\u7d22\u6570\u636e\u7684\u5904\u7406\u5df2\u7ecf\u7f16\u5199\u5b8c\u6bd5\uff0c\u73b0\u5728\u662f\u65f6\u5019\u4f7f\u7528\u53d8\u66f4(mutation)\u6765\u7f16\u5199\u6570\u636e\u5199\u5165\u64cd\u4f5c\u4e86\u3002<\/p>\n
                      \u60a8\u9700\u8981\u5c06\u4ece\u8f93\u5165\u8868\u5355\u4e2d\u83b7\u53d6\u7684\u6570\u636e\u4f5c\u4e3a\u53d8\u91cf\u4f20\u9012\u7ed9GraphQL API\u3002\u60a8\u53ef\u4ee5\u901a\u8fc7\u5728\u53d8\u91cf\u58f0\u660e\u524d\u52a0\u4e0a\u201c$\u201d\u7b26\u53f7\u6765\u5c06\u53d8\u91cf\u4f20\u9012\u7ed9mutation\u7684\u53c2\u6570\u3002<\/p>\n
                      \u6b64\u5916\uff0c\u4f20\u9012\u7ed9mutation\u53c2\u6570\u7684\u53d8\u91cf\u5c06\u88ab\u4f20\u9012\u7ed9createPost\u7684\u53c2\u6570\uff0c\u5f53createPost\u6267\u884c\uff08\u5199\u5165\u6570\u636e\uff09\u5b8c\u6210\u540e\uff0c\u5c06\u8fd4\u56deid\u3002<\/p>\n
                        mutation<\/span> createPostMutation<\/span>(<\/span>$title<\/span>:<\/span> String<\/span>!<\/span>,<\/span> $content<\/span>:<\/span> String<\/span>)<\/span> {<\/span>\r\n    createPost<\/span>(<\/span>title<\/span>:<\/span> $title<\/span>,<\/span> content<\/span>:<\/span> $content<\/span>)<\/span> {<\/span>\r\n      id<\/span>\r\n    }<\/span>\r\n  }<\/span>\r\n<\/code><\/pre>\n
                      \u4e3a\u4e86\u5c06\u503c\u5b58\u50a8\u5230mutation\u7684\u53d8\u91cf\u4e2d\uff0c\u6211\u4eec\u5c06\u521b\u5efa\u4e00\u4e2a\u7528\u4e8e\u6587\u7ae0\u6295\u7a3f\u7684\u8f93\u5165\u8868\u5355\u3002
                      \n\u6211\u4eec\u5c06\u63d0\u4f9b\u4e24\u4e2a\u8f93\u5165\u6846\uff0c\u4e00\u4e2a\u7528\u4e8e\u6807\u9898\uff0c\u53e6\u4e00\u4e2a\u7528\u4e8e\u8f93\u5165\u5185\u5bb9\u7684\u7528\u6237\u754c\u9762\uff0c\u5e76\u5206\u522b\u5728<\/p>\n
                      \u6807\u7b7e\u5185\u4f7f\u7528\u548c