{"id":47437,"date":"2023-12-07T20:49:08","date_gmt":"2023-03-21T04:39:15","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8graphql%e3%80%81go%e3%80%81react%e5%92%8ctypescript%e5%bc%80%e5%8f%91%e7%9a%84todo%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%ef%bc%88%e5%90%8e%e7%ab%af%e9%83%a8%e5%88%86%ef%bc%89%e3%80%82\/"},"modified":"2024-05-04T12:34:35","modified_gmt":"2024-05-04T04:34:35","slug":"%e4%bd%bf%e7%94%a8graphql%e3%80%81go%e3%80%81react%e5%92%8ctypescript%e5%bc%80%e5%8f%91%e7%9a%84todo%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%ef%bc%88%e5%90%8e%e7%ab%af%e9%83%a8%e5%88%86%ef%bc%89%e3%80%82","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8graphql%e3%80%81go%e3%80%81react%e5%92%8ctypescript%e5%bc%80%e5%8f%91%e7%9a%84todo%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%ef%bc%88%e5%90%8e%e7%ab%af%e9%83%a8%e5%88%86%ef%bc%89%e3%80%82\/","title":{"rendered":"\u4f7f\u7528GraphQL\u3001Go\u3001React\u548cTypeScript\u5f00\u53d1\u7684Todo\u5e94\u7528\u7a0b\u5e8f\uff08\u540e\u7aef\u90e8\u5206\uff09"},"content":{"rendered":"

\u9996\u5148<\/h1>\n

\u4e3a\u4e86\u5b66\u4e60GraphQL\uff0c\u6211\u505a\u4e86\u4e00\u4e2aTodo\u5e94\u7528\u7a0b\u5e8f\u6765\u8fdb\u884c\u5b9e\u8df5\u3002
\n\u5728\u672c\u6587\u4e2d\uff0c\u6211\u5c06\u4f5c\u4e3a\u7b2c\u4e00\u90e8\u5206\u603b\u7ed3\u4e86\u4f7f\u7528GraphQL\u67e5\u8be2\u8fdb\u884cTodo\u5e94\u7528\u7a0b\u5e8f\u7684\u540e\u7aef\u5f00\u53d1\u6d41\u7a0b\u3002<\/p>\n

\u8bf7\u67e5\u770b\u90e8\u52062\u7684\u524d\u7aef\u7bc7\u7ae0\u3002<\/p>\n

 <\/p>\n

\u4f7f\u7528\u7684\u6280\u672f\u5806\u6808<\/h3>\n

\u7f16\u7a0b\u8bed\u8a00\uff1aGo\u3001TypeScript
\n\u5e93\uff1aReact\u3001gqlgen\u3001codegen\u3001xorm
\n\u6570\u636e\u5e93\uff1aPostgres<\/p>\n

gqlgen\u548ccodegen\u662f\u53ef\u4ee5\u4eceGraphQL\u6a21\u5f0f\u5b9a\u4e49\u81ea\u52a8\u751f\u6210Go\u548cTypeScript\u4ee3\u7801\u7684\u5e93\u3002
\nxorm\u662f\u4e00\u4e2aGo\u7684ORM\u5e93\uff0c\u4f7f\u7528\u4e86Postgres\u4f5c\u4e3a\u6570\u636e\u5e93\u3002<\/p>\n

\u5f85\u529e\u4e8b\u9879\u5e94\u7528\u7a0b\u5e8f\u7684\u6982\u8ff0<\/h1>\n
\"todoapp.gif\"<\/div>\n
\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8<\/div>\n

\u8bf7\u53c2\u8003\u9002\u5f53\u7684\u6e90\u4ee3\u7801\u4ee5\u89e3\u91ca\u4e0eGraphQL\u76f8\u5173\u7684\u90e8\u5206\uff01?<\/p>\n

 <\/p>\n

\u76ee\u5f55\u7ed3\u6784<\/h3>\n

\u76ee\u5f55\u7ed3\u6784\u5982\u4e0b\u6240\u793a\uff0c\u5728\u672c\u7bc7\u6587\u7ae0\u4e2d\u5c06\u521b\u5efaapp\uff08\u540e\u7aef\u5e94\u7528\u7a0b\u5e8f\u4ee3\u7801\uff09\u3002<\/p>\n

.\r\n\u251c\u2500\u2500 app                                            - \u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u306e\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u30b3\u30fc\u30c9\r\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 Dockerfile\r\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 go.mod\r\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 go.sum\r\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 gqlgen.yml                                 - gqlgen\u306e\u8a2d\u5b9a\u30d5\u30a1\u30a4\u30eb\r\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 graph                                      - GraphQL\u95a2\u9023\u306e\u30b3\u30fc\u30c9\r\n\u2502\u00a0\u00a0 \u2502\u00a0\u00a0 \u251c\u2500\u2500 generated.go                           - gqlgen\u306b\u3088\u3063\u3066\u81ea\u52d5\u751f\u6210\u3055\u308c\u308bGo\u306e\u30b3\u30fc\u30c9\r\n\u2502\u00a0\u00a0 \u2502\u00a0\u00a0 \u251c\u2500\u2500 model                                  - GraphQL\u30e2\u30c7\u30eb\u3092\u5b9a\u7fa9\u3059\u308bGo\u306e\u30b3\u30fc\u30c9\r\n\u2502\u00a0\u00a0 \u2502\u00a0\u00a0 \u2502\u00a0\u00a0 \u251c\u2500\u2500 models_gen.go                      - gqlgen\u306b\u3088\u3063\u3066\u81ea\u52d5\u751f\u6210\u3055\u308c\u308b\u30e2\u30c7\u30eb\u306e\u30b3\u30fc\u30c9\r\n\u2502\u00a0\u00a0 \u2502\u00a0\u00a0 \u2502\u00a0\u00a0 \u2514\u2500\u2500 todo.go\r\n\u2502\u00a0\u00a0 \u2502\u00a0\u00a0 \u251c\u2500\u2500 resolver.go                            - GraphQL\u30ea\u30be\u30eb\u30d0\u306e\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30fc\u30b9\u3092\u5b9a\u7fa9\u3059\u308b\r\n\u2502\u00a0\u00a0 \u2502\u00a0\u00a0 \u2514\u2500\u2500 schema.resolvers.go                    - \u30ea\u30be\u30eb\u30d0\u30a4\u30f3\u30bf\u30fc\u30d5\u30a7\u30fc\u30b9\u3092\u5177\u4f53\u7684\u306b\u5b9f\u88c5\u3059\u308b\u30b3\u30fc\u30c9\r\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 infrastructure\r\n\u2502\u00a0\u00a0 \u2502\u00a0\u00a0 \u2514\u2500\u2500 todo.go                                - \u30a4\u30f3\u30d5\u30e9\u306eTodo\u30e2\u30c7\u30eb\r\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 server.go                                  - \u30b5\u30fc\u30d0\u30fc\u30b3\u30fc\u30c9\u306e\u30a8\u30f3\u30c8\u30ea\u30fc\u30dd\u30a4\u30f3\u30c8\r\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 sql\r\n\u2502\u00a0\u00a0 \u2502\u00a0\u00a0 \u2514\u2500\u2500 init.sql                               - \u521d\u671f\u5316SQL\u30b9\u30af\u30ea\u30d7\u30c8\r\n\u2502\u00a0\u00a0 \u2514\u2500\u2500 tools.go                                   - gqlgen\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u7528\u306e\u30d5\u30a1\u30a4\u30eb\r\n\u2502\r\n\u251c\u2500\u2500 front                                          - \u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u306e\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u30b3\u30fc\u30c9\r\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 Dockerfile\r\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 codegen.yml                                - codegen(\u30d5\u30ed\u30f3\u30c8\u306eGraphQL\u30b3\u30fc\u30c9\u751f\u6210)\u306e\u8a2d\u5b9a\u30d5\u30a1\u30a4\u30eb\r\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 graphql                                    - GraphQL\u306e\u30af\u30a8\u30ea\u3084\u30b9\u30ad\u30fc\u30de\u3092\u5b9a\u7fa9\r\n\u2502\u00a0\u00a0 \u2502\u00a0\u00a0 \u251c\u2500\u2500 mutation                               - \u30c7\u30fc\u30bf\u3092\u5909\u66f4\u3059\u308bGraphQL\u306emutation\u5b9a\u7fa9\r\n\u2502\u00a0\u00a0 \u2502\u00a0\u00a0 \u2502\u00a0\u00a0 \u251c\u2500\u2500 createTodo.graphql\r\n\u2502\u00a0\u00a0 \u2502\u00a0\u00a0 \u2502\u00a0\u00a0 \u251c\u2500\u2500 deleteTodo.graphql\r\n\u2502\u00a0\u00a0 \u2502\u00a0\u00a0 \u2502\u00a0\u00a0 \u2514\u2500\u2500 updateTodoStatus.graphql\r\n\u2502\u00a0\u00a0 \u2502\u00a0\u00a0 \u2514\u2500\u2500 query                                  - \u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3059\u308bGraphQL\u306equery\u5b9a\u7fa9\r\n\u2502\u00a0\u00a0 \u2502\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u2514\u2500\u2500 getAllTodos.graphql\r\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 node_modules\r\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 package-lock.json\r\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 package.json\r\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 public\r\n\u2502\u00a0\u00a0 \u251c\u2500\u2500 src                                        - \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\r\n\u2502\u00a0\u00a0 \u2502\u00a0\u00a0 \u251c\u2500\u2500 App.tsx                                - \u30e1\u30a4\u30f3\u306e\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\r\n\u2502\u00a0\u00a0 \u2502\u00a0\u00a0 \u251c\u2500\u2500 components                             - \u518d\u5229\u7528\u53ef\u80fd\u306aUI\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\r\n\u2502\u00a0\u00a0 \u2502\u00a0\u00a0 \u2502\u00a0\u00a0 \u251c\u2500\u2500 CreateTodoForm.tsx\r\n\u2502\u00a0\u00a0 \u2502\u00a0\u00a0 \u2502\u00a0\u00a0 \u2514\u2500\u2500 TodoList.tsx\r\n\u2502\u00a0\u00a0 \u2502\u00a0\u00a0 \u251c\u2500\u2500 index.tsx                              - \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30a8\u30f3\u30c8\u30ea\u30fc\u30dd\u30a4\u30f3\u30c8\r\n\u2502\u00a0\u00a0 \u2502\u00a0\u00a0 \u2514\u2500\u2500 types                                  - TypeScript\u306e\u578b\u5b9a\u7fa9\r\n\u2502\u00a0\u00a0 \u2502\u00a0\u00a0     \u2514\u2500\u2500 gen                                - codegen\u306b\u3088\u3063\u3066\u81ea\u52d5\u751f\u6210\u3055\u308c\u308b\u578b\u5b9a\u7fa9\r\n\u2502\u00a0\u00a0 \u2502\u00a0\u00a0         \u251c\u2500\u2500 api.ts                         - API\u306e\u578b\u5b9a\u7fa9\r\n\u2502\u00a0\u00a0 \u2502\u00a0\u00a0         \u2514\u2500\u2500 possibleTypes-result.ts\r\n\u2502\u00a0\u00a0 \u2514\u2500\u2500 tsconfig.json\r\n\u2502\r\n\u251c\u2500\u2500 docker-compose.yml\r\n\u2514\u2500\u2500 schema.graphqls                                - \u5171\u901a\u306eGraphQL\u30b9\u30ad\u30fc\u30de\u3092\u5b9a\u7fa9\r\n<\/code><\/pre>\n
Todo\u5e94\u7528\u7684\u5b9e\u8df5\u6307\u5357\u3002<\/h1>\n
\u63a5\u4e0b\u6765\u6211\u4eec\u5c06\u89e3\u91ca\u4e00\u4e0b\u4f7f\u7528GraphQL\u5f00\u53d1Todo\u5e94\u7528\u7a0b\u5e8f\u7684\u540e\u7aef\u6b65\u9aa4\u3002<\/p>\n
\u540e\u7aef\u5f00\u53d1\u6d41\u7a0b\u6982\u8ff0<\/h2>\n
    \n
  1. \n
      \u9879\u76ee\u8bbe\u7f6e<\/ol>\n<\/li>\n<\/ol>\n
       <\/p>\n
        \n
      1. \n
          \u4f7f\u7528gqlgen\u521b\u5efa\u6a21\u677f<\/ol>\n<\/li>\n<\/ol>\n
           <\/p>\n
            \n
          1. \n
              \u8fde\u63a5\u6570\u636e\u5e93\u7684\u8bbe\u7f6e<\/ol>\n<\/li>\n<\/ol>\n
               <\/p>\n
                \n
              1. \n
                  \u5b9a\u4e49GraphQL\u6a21\u5f0f<\/ol>\n<\/li>\n<\/ol>\n
                   <\/p>\n
                    \n
                  1. \n
                      \u4f7f\u7528gqlgen\u751f\u6210Go\u4ee3\u7801<\/ol>\n<\/li>\n<\/ol>\n
                       <\/p>\n
                        \u5b9e\u73b0\u89e3\u6790\u5668<\/ol>\n
                        Resolution\u662fGraphQL\u7684Query\u548cMutation\u88ab\u6267\u884c\u65f6\u8c03\u7528\u7684\u51fd\u6570\uff0c\u7528\u4e8e\u5b9e\u73b0\u5177\u4f53\u7684\u6570\u636e\u83b7\u53d6\u548c\u6570\u636e\u64cd\u4f5c\u903b\u8f91\u3002\u6362\u53e5\u8bdd\u8bf4\uff0c\u5b83\u8d1f\u8d23\u786e\u5b9a\u5982\u4f55\u56de\u5e94\u5ba2\u6237\u7aef\u7684\u67e5\u8be2\u4ee5\u53ca\u5982\u4f55\u4fee\u6539\u6570\u636e\u3002<\/p>\n
                        \u9879\u76ee\u7684\u8bbe\u7f6e<\/h3>\n
                        \u9996\u5148\uff0c\u5728\u8be5\u76ee\u5f55\u4e0b\u521b\u5efa\u4e00\u4e2a\u65b0\u7684\u6587\u4ef6\u5939\uff0c\u5e76\u521d\u59cb\u5316Go\u6a21\u5757\u3002<\/p>\n
                        mkdir<\/span> ~\/go\/src\/github.com\/[username]\/todoapp-graphql-go-react\r\ncd<\/span> ~\/go\/src\/github.com\/[username]\/todoapp-graphql-go-react\r\nmkdir <\/span>app\r\ncd <\/span>app\r\ngo mod init github.com\/[username]\/todoapp-graphql-go-react\r\n<\/code><\/pre>\n
                        \u4f7f\u7528gqlgen\u521b\u5efa\u6a21\u677f<\/h3>\n
                        \u4f7f\u7528\u4e0b\u9762\u7684gqlgen\u547d\u4ee4\u521b\u5efa\u4e00\u4e2a\u65b0\u9879\u76ee\u7684\u6a21\u677f\u3002<\/p>\n
                        cd <\/span>app\r\ngo run github.com\/99designs\/gqlgen init\r\n<\/code><\/pre>\n
                        \u8bf7\u53c2\u8003gqlgen\u7684\u5b98\u65b9\u6587\u6863\u83b7\u53d6\u6709\u5173\u5b89\u88c5gqlgen\u548c\u521b\u5efa\u6a21\u677f\u7684\u8be6\u7ec6\u4fe1\u606f?<\/p>\n
                         <\/p>\n
                        \u4e0eDB\u7684\u8fde\u63a5\u8bbe\u7f6e<\/h3>\n
                        \u9700\u8981\u5efa\u7acb\u5e94\u7528\u7a0b\u5e8f\u4e0e\u6570\u636e\u5e93\u4e4b\u95f4\u7684\u8fde\u63a5\u3002\u6211\u4eec\u5c06\u4f7f\u7528 xorm \u5e93\u6765\u8fde\u63a5\u5230 Postgres \u6570\u636e\u5e93\u3002\u5728 server.go \u6587\u4ef6\u4e2d\uff0c\u6211\u4eec\u5c06\u6dfb\u52a0\u6570\u636e\u5e93\u8fde\u63a5\u7684\u4ee3\u7801\u3002<\/p>\n
                        package<\/span> main<\/span>\r\n\r\nimport<\/span> (<\/span>\r\n\t\"log\"<\/span>\r\n\t\"net\/http\"<\/span>\r\n\t\"os\"<\/span>\r\n\r\n\t\"github.com\/99designs\/gqlgen\/graphql\/handler\"<\/span>\r\n\t\"github.com\/99designs\/gqlgen\/graphql\/playground\"<\/span>\r\n\t_<\/span> \"github.com\/lib\/pq\"<\/span>\r\n\t\"github.com\/rs\/cors\"<\/span>\r\n\t\"github.com\/[username]\/todoapp-graphql-go-react\/app\/graph\"<\/span>\r\n\t\"xorm.io\/xorm\"<\/span>\r\n)<\/span>\r\n\r\nconst<\/span> defaultPort<\/span> =<\/span> \"8080\"<\/span>\r\n\r\nfunc<\/span> main<\/span>()<\/span> {<\/span>\r\n\t\/\/ DB\u3078\u306e\u63a5\u7d9a\u60c5\u5831\u3092\u8a2d\u5b9a<\/span>\r\n\tconnectionString<\/span> :=<\/span> \"user=postgres password=postgres dbname=testdb host=db port=5432 sslmode=disable\"<\/span>\r\n\tengine<\/span>,<\/span> err<\/span> :=<\/span> xorm<\/span>.<\/span>NewEngine<\/span>(<\/span>\"postgres\"<\/span>,<\/span> connectionString<\/span>)<\/span>\r\n\tif<\/span> err<\/span> !=<\/span> nil<\/span> {<\/span>\r\n\t\tlog<\/span>.<\/span>Fatalln<\/span>(<\/span>\"error - create engine: \"<\/span>,<\/span> err<\/span>)<\/span>\r\n\t}<\/span>\r\n\r\n\t\/\/ DB\u3078\u63a5\u7d9a<\/span>\r\n\terr<\/span> =<\/span> engine<\/span>.<\/span>Ping<\/span>()<\/span>\r\n\tif<\/span> err<\/span> !=<\/span> nil<\/span> {<\/span>\r\n\t\tlog<\/span>.<\/span>Fatalln<\/span>(<\/span>\"error - connect DB: \"<\/span>,<\/span> err<\/span>)<\/span>\r\n\t}<\/span>\r\n\tlog<\/span>.<\/span>Println<\/span>(<\/span>\"success - connect DB\"<\/span>)<\/span>\r\n\r\n\t\/\/ \u74b0\u5883\u5909\u6570\u304b\u3089\u30dd\u30fc\u30c8\u756a\u53f7\u3092\u53d6\u5f97\u3001\u8a2d\u5b9a\u3055\u308c\u3066\u3044\u306a\u3044\u5834\u5408\u306f\u30c7\u30d5\u30a9\u30eb\u30c8\u5024\u3092\u4f7f\u7528<\/span>\r\n\tport<\/span> :=<\/span> os<\/span>.<\/span>Getenv<\/span>(<\/span>\"PORT\"<\/span>)<\/span>\r\n\tif<\/span> port<\/span> ==<\/span> \"\"<\/span> {<\/span>\r\n\t\tport<\/span> =<\/span> defaultPort<\/span>\r\n\t}<\/span>\r\n\r\n\t\/\/ gqlgen\u306e\u30b5\u30fc\u30d0\u3092\u65b0\u898f\u4f5c\u6210\u3057\u3001\u30ea\u30be\u30eb\u30d0\u3068\u3057\u3066DB\u63a5\u7d9a\u3092\u6e21\u3059<\/span>\r\n\tsrv<\/span> :=<\/span> handler<\/span>.<\/span>NewDefaultServer<\/span>(<\/span>graph<\/span>.<\/span>NewExecutableSchema<\/span>(<\/span>graph<\/span>.<\/span>Config<\/span>{<\/span>Resolvers<\/span>:<\/span> &<\/span>graph<\/span>.<\/span>Resolver<\/span>{<\/span>DB<\/span>:<\/span> engine<\/span>}}))<\/span>\r\n\r\n\t\/\/ \u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u304b\u3089\u63a5\u7d9a\u53ef\u80fd\u306b\u3059\u308b\u305f\u3081CORS\u3092\u8a2d\u5b9a<\/span>\r\n\tc<\/span> :=<\/span> cors<\/span>.<\/span>New<\/span>(<\/span>cors<\/span>.<\/span>Options<\/span>{<\/span>\r\n\t\tAllowedOrigins<\/span>:<\/span>   []<\/span>string<\/span>{<\/span>\"*\"<\/span>},<\/span>\r\n\t\tAllowedMethods<\/span>:<\/span>   []<\/span>string<\/span>{<\/span>\"GET\"<\/span>,<\/span> \"POST\"<\/span>,<\/span> \"OPTIONS\"<\/span>},<\/span>\r\n\t\tAllowedHeaders<\/span>:<\/span>   []<\/span>string<\/span>{<\/span>\"Content-Type\"<\/span>,<\/span> \"Authorization\"<\/span>},<\/span>\r\n\t\tAllowCredentials<\/span>:<\/span> true<\/span>,<\/span>\r\n\t})<\/span>\r\n\thandler<\/span> :=<\/span> c<\/span>.<\/span>Handler<\/span>(<\/span>http<\/span>.<\/span>DefaultServeMux<\/span>)<\/span>\r\n\r\n\t\/\/ \u30eb\u30fc\u30c8URL\u3067GraphQL\u306ePlayground\u3092\u8d77\u52d5<\/span>\r\n\thttp<\/span>.<\/span>Handle<\/span>(<\/span>\"\/\"<\/span>,<\/span> playground<\/span>.<\/span>Handler<\/span>(<\/span>\"GraphQL playground\"<\/span>,<\/span> \"\/query\"<\/span>))<\/span>\r\n\t\/\/ \/query\u306e\u30d1\u30b9\u3067GraphQL\u306e\u30a8\u30f3\u30c9\u30dd\u30a4\u30f3\u30c8\u3092\u8a2d\u5b9a<\/span>\r\n\thttp<\/span>.<\/span>Handle<\/span>(<\/span>\"\/query\"<\/span>,<\/span> srv<\/span>)<\/span>\r\n\r\n\t\/\/ \u6ce8\u610f: Docker\u74b0\u5883\u306eport\u3068\u30ed\u30fc\u30ab\u30eb\u74b0\u5883\u306eport\u304c\u9055\u3046\u305f\u3081\u3001\u5b9f\u969b\u306b\u30ed\u30fc\u30ab\u30eb\u74b0\u5883\u304b\u3089\u63a5\u7d9a\u3059\u308bport\u306f\u7570\u306a\u308a8081\u3067\u3042\u308b<\/span>\r\n\tlog<\/span>.<\/span>Printf<\/span>(<\/span>\"connect to http:\/\/localhost:%s\/ for GraphQL playground\"<\/span>,<\/span> port<\/span>)<\/span>\r\n\t\/\/ \u30b5\u30fc\u30d0\u3092\u8d77\u52d5\u3001\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u305f\u5834\u5408\u306f\u30ed\u30b0\u306b\u51fa\u529b\u3057\u3066\u7d42\u4e86<\/span>\r\n\tlog<\/span>.<\/span>Fatal<\/span>(<\/span>http<\/span>.<\/span>ListenAndServe<\/span>(<\/span>\":\"<\/span>+<\/span>port<\/span>,<\/span> handler<\/span>))<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
                        \u5728\u8fd9\u91cc\uff0c\u6211\u4eec\u9700\u8981\u5728resolver.go\u7684Resolver\u7ed3\u6784\u4f53\u4e2d\u6dfb\u52a0\u4e00\u4e2aDB\u5b57\u6bb5\uff0c\u4ee5\u4fbf\u5728\u540e\u7eed\u7684\u5b9e\u73b0\u4e2d\u4f7f\u7528xorm\u5f15\u64ce\u4f5c\u4e3a\u89e3\u6790\u5668\u3002<\/p>\n
                        package<\/span> graph<\/span>\r\n\r\nimport<\/span> \"xorm.io\/xorm\"<\/span>\r\n\r\ntype<\/span> Resolver<\/span> struct<\/span> {<\/span>\r\n\t\/\/ xorm\u30a8\u30f3\u30b8\u30f3\u306e\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u3092\u30d5\u30a3\u30fc\u30eb\u30c9\u3068\u3057\u3066\u4fdd\u6301<\/span>\r\n\tDB<\/span> *<\/span>xorm<\/span>.<\/span>Engine<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
                        GraphQL \u7684\u6a21\u5f0f\u5b9a\u4e49<\/h3>\n
                        \u5728\u8fd9\u4e2a\u6b65\u9aa4\u4e2d\uff0c\u6211\u4eec\u5c06\u5728Todo\u5e94\u7528\u7a0b\u5e8f\u4e2d\u8fdb\u884c\u67e5\u8be2\u548c\u7c7b\u578b\u6a21\u5f0f\u7684\u5b9a\u4e49\u3002
                        \n\u901a\u8fc7\u8fd9\u4e2a\u6a21\u5f0f\u5b9a\u4e49\uff0cQuery\u548cMutation\u7684\u7ec8\u7aef\u70b9\u88ab\u5b9a\u4e49\u3002Query\u7528\u4e8e\u83b7\u53d6\u6570\u636e\uff0c\u800cMutation\u7528\u4e8e\u4fee\u6539\u6570\u636e\u3002<\/p>\n
                        # \u30c7\u30fc\u30bf\u53d6\u5f97\u306e\u305f\u3081\u306e\u30b9\u30ad\u30fc\u30de<\/span>\r\ntype<\/span> Query<\/span> {<\/span>\r\n  todos<\/span>:<\/span> [<\/span>Todo<\/span>!]!<\/span>\r\n}<\/span>\r\n\r\n# \u30c7\u30fc\u30bf\u5909\u66f4\u306e\u305f\u3081\u306e\u30b9\u30ad\u30fc\u30de<\/span>\r\ntype<\/span> Mutation<\/span> {<\/span>\r\n  createTodo<\/span>(<\/span>todoInput<\/span>:<\/span> CreateTodoInput<\/span>!):<\/span> Todo<\/span>!<\/span>\r\n  updateTodoStatus<\/span>(<\/span>todoId<\/span>:<\/span> ID<\/span>!,<\/span> done<\/span>:<\/span> Boolean<\/span>!):<\/span> Boolean<\/span>!<\/span>\r\n  deleteTodo<\/span>(<\/span>todoId<\/span>:<\/span> ID<\/span>!):<\/span> Boolean<\/span>!<\/span>\r\n}<\/span>\r\n\r\n# Todo\u306e\u578b\u5b9a\u7fa9<\/span>\r\ntype<\/span> Todo<\/span> {<\/span>\r\n  id<\/span>:<\/span> ID<\/span>!<\/span>\r\n  text<\/span>:<\/span> String<\/span>!<\/span>\r\n  done<\/span>:<\/span> Boolean<\/span>!<\/span>\r\n}<\/span>\r\n\r\n# Todo\u4f5c\u6210\u306e\u969b\u306b\u5fc5\u8981\u306a\u5f15\u6570\u3092\u5b9a\u7fa9<\/span>\r\ninput<\/span> CreateTodoInput<\/span> {<\/span>\r\n  text<\/span>:<\/span> String<\/span>!<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
                        \u4f7f\u7528gqlgen\u6765\u81ea\u52a8\u751f\u6210Go\u4ee3\u7801\u3002<\/h3>\n
                        \u4f7f\u7528gqlgen\u5de5\u5177\uff0c\u53ef\u4ee5\u81ea\u52a8\u4eceGraphQL\u6a21\u5f0f\u751f\u6210Go\u4ee3\u7801\u3002<\/p>\n
                        cd <\/span>app\r\ngo run github.com\/99designs\/gqlgen generate\r\n<\/code><\/pre>\n
                        \u751f\u6210\u81ea\u52a8\u5316\u65f6\uff0c\u5c06\u6839\u636e app\/gqlgen.yml\uff08\u7528\u4e8e\u4ece\u6a21\u5f0f\u81ea\u52a8\u751f\u6210Go\u4ee3\u7801\u7684\u914d\u7f6e\u6587\u4ef6\uff09\u8fdb\u884c\u751f\u6210\u3002<\/p>\n
                        # \u30b9\u30ad\u30fc\u30de\u5b9a\u7fa9\u30d5\u30a1\u30a4\u30eb\u306e\u30d1\u30b9\u3092\u6307\u5b9a<\/span>\r\nschema<\/span>:<\/span>\r\n  -<\/span> ..\/*.graphqls<\/span>\r\n\r\n# gqlgen\u306b\u3088\u3063\u3066\u81ea\u52d5\u751f\u6210\u3055\u308c\u308b\u5b9f\u884c\u53ef\u80fd\u306aGraphQL\u30b3\u30fc\u30c9\u306e\u8a2d\u5b9a<\/span>\r\nexec<\/span>:<\/span>\r\n  filename<\/span>:<\/span> graph\/generated.go<\/span>  # \u751f\u6210\u3059\u308b\u30d5\u30a1\u30a4\u30eb\u540d<\/span>\r\n  package<\/span>:<\/span> graph<\/span>  # \u751f\u6210\u3059\u308b\u30d1\u30c3\u30b1\u30fc\u30b8\u540d<\/span>\r\n\r\n# gqlgen\u306b\u3088\u3063\u3066\u81ea\u52d5\u751f\u6210\u3055\u308c\u308b\u30e2\u30c7\u30eb\u30b3\u30fc\u30c9\u306e\u8a2d\u5b9a<\/span>\r\nmodel<\/span>:<\/span>\r\n  filename<\/span>:<\/span> graph\/model\/models_gen.go<\/span>  # \u751f\u6210\u3059\u308b\u30d5\u30a1\u30a4\u30eb\u540d<\/span>\r\n  package<\/span>:<\/span> model<\/span>  # \u751f\u6210\u3059\u308b\u30d1\u30c3\u30b1\u30fc\u30b8\u540d<\/span>\r\n\r\n# \u30ea\u30be\u30eb\u30d0\u306e\u8a2d\u5b9a<\/span>\r\nresolver<\/span>:<\/span>\r\n  layout<\/span>:<\/span> follow-schema<\/span>  # \u30b9\u30ad\u30fc\u30de\u3068\u540c\u3058\u69cb\u9020\u3067\u30ea\u30be\u30eb\u30d0\u3092\u751f\u6210\u3059\u308b<\/span>\r\n  dir<\/span>:<\/span> graph<\/span>  # \u30ea\u30be\u30eb\u30d0\u3092\u751f\u6210\u3059\u308b\u30c7\u30a3\u30ec\u30af\u30c8\u30ea<\/span>\r\n  package<\/span>:<\/span> graph<\/span>  # \u30ea\u30be\u30eb\u30d0\u3092\u751f\u6210\u3059\u308b\u30d1\u30c3\u30b1\u30fc\u30b8\u540d<\/span>\r\n\r\n# \u30b9\u30ad\u30fc\u30de\u306e\u578b\u3068Go\u306e\u578b\u306e\u30de\u30c3\u30d4\u30f3\u30b0\u8a2d\u5b9a<\/span>\r\nmodels<\/span>:<\/span>\r\n  ID<\/span>:<\/span>  # GraphQL\u306eID\u578b\u306b\u5bfe\u5fdc\u3059\u308bGo\u306e\u578b\u3092\u6307\u5b9a<\/span>\r\n    model<\/span>:<\/span>\r\n      -<\/span> github.com\/99designs\/gqlgen\/graphql.ID<\/span>\r\n      -<\/span> github.com\/99designs\/gqlgen\/graphql.Int<\/span>\r\n      -<\/span> github.com\/99designs\/gqlgen\/graphql.Int64<\/span>\r\n      -<\/span> github.com\/99designs\/gqlgen\/graphql.Int32<\/span>\r\n  Int<\/span>:<\/span>  # GraphQL\u306eInt\u578b\u306b\u5bfe\u5fdc\u3059\u308bGo\u306e\u578b\u3092\u6307\u5b9a<\/span>\r\n    model<\/span>:<\/span>\r\n      -<\/span> github.com\/99designs\/gqlgen\/graphql.Int<\/span>\r\n      -<\/span> github.com\/99designs\/gqlgen\/graphql.Int64<\/span>\r\n      -<\/span> github.com\/99designs\/gqlgen\/graphql.Int32<\/span>\r\n<\/code><\/pre>\n
                        \u89e3\u6790\u5668\u7684\u5b9e\u73b0<\/h3>\n
                        \u5728\u5b9e\u65bd\u89e3\u6790\u5668\u65f6\uff0c\u5b9a\u4e49\u4e86\u6bcf\u4e2a\u4e0a\u8ff0\u7ec8\u7aef\u7684\u5b9e\u9645\u64cd\u4f5c\u3002\u4f8b\u5982\uff0ccreateTodo\u7ec8\u7aef\u5c06\u521b\u5efa\u4e00\u4e2a\u65b0\u7684\u5f85\u529e\u4e8b\u9879\u5e76\u8fd4\u56de\u8be5\u5f85\u529e\u4e8b\u9879\u3002\u5177\u4f53\u6765\u8bf4\uff0ccreateTodo\u5c06\u6267\u884c\u4ee5\u4e0b\u64cd\u4f5c\uff1a<\/p>\n
                          \n
                        1. \n
                            \u751f\u6210\u4e00\u4e2aUUID\u5e76\u521b\u5efa\u4e00\u4e2a\u65b0\u7684\u5f85\u529e\u4e8b\u9879<\/ol>\n<\/li>\n<\/ol>\n
                             <\/p>\n
                              \n
                            1. \n
                                \u5c06\u751f\u6210\u7684\u5f85\u529e\u4e8b\u9879\u4fdd\u5b58\u5230\u6570\u636e\u5e93\u4e2d<\/ol>\n<\/li>\n<\/ol>\n
                                 <\/p>\n
                                  \u5982\u679c\u6ca1\u6709\u53d1\u751f\u9519\u8bef\uff0c\u8fd4\u56de\u65b0\u7684\u5f85\u529e\u4e8b\u9879<\/ol>\n
                                  \u548c\u5176\u4ed6\u7ec8\u7aef\u70b9\u4e00\u6837\uff0c\u4e5f\u4f1a\u5b9e\u73b0\u5177\u4f53\u7684\u6570\u636e\u64cd\u4f5c\u548c\u6570\u636e\u83b7\u53d6\u903b\u8f91\u3002<\/p>\n
                                  package<\/span> graph<\/span>\r\n\r\nimport<\/span> (<\/span>\r\n\t\"context\"<\/span>\r\n\t\"log\"<\/span>\r\n\r\n\t\"github.com\/google\/uuid\"<\/span>\r\n\t\"github.com\/[username]\/todoapp-graphql-go-react\/app\/graph\/model\"<\/span>\r\n\t\"github.com\/[username]\/todoapp-graphql-go-react\/app\/infrastructure\"<\/span>\r\n)<\/span>\r\n\r\n\/\/ \u65b0\u3057\u3044Todo\u3092\u4f5c\u6210\u3059\u308b\u305f\u3081\u306e\u30ea\u30be\u30eb\u30d0<\/span>\r\nfunc<\/span> (<\/span>r<\/span> *<\/span>mutationResolver<\/span>)<\/span> CreateTodo<\/span>(<\/span>ctx<\/span> context<\/span>.<\/span>Context<\/span>,<\/span> todoInput<\/span> model<\/span>.<\/span>CreateTodoInput<\/span>)<\/span> (<\/span>*<\/span>model<\/span>.<\/span>Todo<\/span>,<\/span> error<\/span>)<\/span> {<\/span>\r\n\t\/\/ \u65b0\u3057\u3044UUID\u306e\u751f\u6210<\/span>\r\n\tnewUUID<\/span>,<\/span> err<\/span> :=<\/span> uuid<\/span>.<\/span>NewRandom<\/span>()<\/span>\r\n\tif<\/span> err<\/span> !=<\/span> nil<\/span> {<\/span>\r\n\t\tlog<\/span>.<\/span>Printf<\/span>(<\/span>\"Error generating UUID: %v<\/span>\\n<\/span>\"<\/span>,<\/span> err<\/span>)<\/span>\r\n\t\treturn<\/span> nil<\/span>,<\/span> err<\/span>\r\n\t}<\/span>\r\n\t\/\/ \u65b0\u3057\u3044Todo\u306e\u4f5c\u6210<\/span>\r\n\ttodo<\/span> :=<\/span> &<\/span>infrastructure<\/span>.<\/span>Todo<\/span>{<\/span>\r\n\t\tID<\/span>:<\/span>   newUUID<\/span>.<\/span>String<\/span>(),<\/span>\r\n\t\tText<\/span>:<\/span> todoInput<\/span>.<\/span>Text<\/span>,<\/span>\r\n\t}<\/span>\r\n\r\n\t\/\/ DB\u306b\u65b0\u3057\u3044Todo\u3092\u633f\u5165<\/span>\r\n\t_<\/span>,<\/span> err<\/span> =<\/span> r<\/span>.<\/span>DB<\/span>.<\/span>Insert<\/span>(<\/span>todo<\/span>)<\/span>\r\n\tif<\/span> err<\/span> !=<\/span> nil<\/span> {<\/span>\r\n\t\tlog<\/span>.<\/span>Printf<\/span>(<\/span>\"Error insert todo: %v<\/span>\\n<\/span>\"<\/span>,<\/span> err<\/span>)<\/span>\r\n\t\treturn<\/span> nil<\/span>,<\/span> err<\/span>\r\n\t}<\/span>\r\n\r\n\t\/\/ \u65b0\u3057\u3044Todo\u3092\u8fd4\u3059<\/span>\r\n\treturn<\/span> model<\/span>.<\/span>NewTodo<\/span>(<\/span>todo<\/span>),<\/span> nil<\/span>\r\n}<\/span>\r\n\r\n\/\/ Todo\u306e\u30b9\u30c6\u30fc\u30bf\u30b9\u3092\u66f4\u65b0\u3059\u308b\u305f\u3081\u306e\u30ea\u30be\u30eb\u30d0<\/span>\r\nfunc<\/span> (<\/span>r<\/span> *<\/span>mutationResolver<\/span>)<\/span> UpdateTodoStatus<\/span>(<\/span>ctx<\/span> context<\/span>.<\/span>Context<\/span>,<\/span> todoID<\/span> string<\/span>,<\/span> done<\/span> bool<\/span>)<\/span> (<\/span>bool<\/span>,<\/span> error<\/span>)<\/span> {<\/span>\r\n\ttodo<\/span> :=<\/span> &<\/span>infrastructure<\/span>.<\/span>Todo<\/span>{<\/span>\r\n\t\tDone<\/span>:<\/span> done<\/span>,<\/span>\r\n\t}<\/span>\r\n\t\/\/ \u6307\u5b9a\u3055\u308c\u305fID\u306eTodo\u306e\u30b9\u30c6\u30fc\u30bf\u30b9\u3092\u66f4\u65b0<\/span>\r\n\t_<\/span>,<\/span> err<\/span> :=<\/span> r<\/span>.<\/span>DB<\/span>.<\/span>ID<\/span>(<\/span>todoID<\/span>)<\/span>.<\/span>Cols<\/span>(<\/span>\"done\"<\/span>)<\/span>.<\/span>Update<\/span>(<\/span>todo<\/span>)<\/span>\r\n\tif<\/span> err<\/span> !=<\/span> nil<\/span> {<\/span>\r\n\t\tlog<\/span>.<\/span>Printf<\/span>(<\/span>\"Error update todo status: %v<\/span>\\n<\/span>\"<\/span>,<\/span> err<\/span>)<\/span>\r\n\t\treturn<\/span> false<\/span>,<\/span> err<\/span>\r\n\t}<\/span>\r\n\t\/\/ \u66f4\u65b0\u6210\u529f\u3092\u8fd4\u3059<\/span>\r\n\treturn<\/span> true<\/span>,<\/span> nil<\/span>\r\n}<\/span>\r\n\r\n\/\/ Todo\u3092\u524a\u9664\u3059\u308b\u305f\u3081\u306e\u30ea\u30be\u30eb\u30d0<\/span>\r\nfunc<\/span> (<\/span>r<\/span> *<\/span>mutationResolver<\/span>)<\/span> DeleteTodo<\/span>(<\/span>ctx<\/span> context<\/span>.<\/span>Context<\/span>,<\/span> todoID<\/span> string<\/span>)<\/span> (<\/span>bool<\/span>,<\/span> error<\/span>)<\/span> {<\/span>\r\n\t\/\/ \u6307\u5b9a\u3055\u308c\u305fID\u306eTodo\u3092\u524a\u9664<\/span>\r\n\t_<\/span>,<\/span> err<\/span> :=<\/span> r<\/span>.<\/span>DB<\/span>.<\/span>ID<\/span>(<\/span>todoID<\/span>)<\/span>.<\/span>Delete<\/span>(<\/span>&<\/span>infrastructure<\/span>.<\/span>Todo<\/span>{})<\/span>\r\n\tif<\/span> err<\/span> !=<\/span> nil<\/span> {<\/span>\r\n\t\tlog<\/span>.<\/span>Printf<\/span>(<\/span>\"Error delete todo: %v<\/span>\\n<\/span>\"<\/span>,<\/span> err<\/span>)<\/span>\r\n\t\treturn<\/span> false<\/span>,<\/span> err<\/span>\r\n\t}<\/span>\r\n\t\/\/ \u524a\u9664\u6210\u529f\u3092\u8fd4\u3059<\/span>\r\n\treturn<\/span> true<\/span>,<\/span> nil<\/span>\r\n}<\/span>\r\n\r\n\/\/ \u5168\u3066\u306eTodo\u3092\u53d6\u5f97\u3059\u308b\u305f\u3081\u306e\u30ea\u30be\u30eb\u30d0<\/span>\r\nfunc<\/span> (<\/span>r<\/span> *<\/span>queryResolver<\/span>)<\/span> Todos<\/span>(<\/span>ctx<\/span> context<\/span>.<\/span>Context<\/span>)<\/span> ([]<\/span>*<\/span>model<\/span>.<\/span>Todo<\/span>,<\/span> error<\/span>)<\/span> {<\/span>\r\n\tvar<\/span> todos<\/span> []<\/span>*<\/span>infrastructure<\/span>.<\/span>Todo<\/span>\r\n\t\/\/ DB\u304b\u3089\u5168\u3066\u306eTodo\u3092\u53d6\u5f97<\/span>\r\n\tr<\/span>.<\/span>DB<\/span>.<\/span>AllCols<\/span>()<\/span>.<\/span>Find<\/span>(<\/span>&<\/span>todos<\/span>)<\/span>\r\n\t\/\/ \u53d6\u5f97\u3057\u305fTodo\u3092\u8fd4\u3059<\/span>\r\n\treturn<\/span> model<\/span>.<\/span>NewTodos<\/span>(<\/span>todos<\/span>),<\/span> nil<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
                                  \u4ee5\u4e0b\u7684\u6b65\u9aa4\u662f\u4f7f\u7528GraphQL\u548cGo\u5f00\u53d1Todo\u5e94\u7528\u7a0b\u5e8f\u540e\u7aef\u7684\u57fa\u672c\u6b65\u9aa4\u3002\u5982\u679c\u9700\u8981\uff0c\u53ef\u4ee5\u53c2\u8003\u5404\u4e2a\u6280\u672f\u7684\u5b98\u65b9\u6587\u6863\uff0c\u4e86\u89e3\u6bcf\u4e2a\u6b65\u9aa4\u7684\u8be6\u7ec6\u8bf4\u660e\u548c\u5404\u4e2a\u6280\u672f\u7684\u57fa\u672c\u77e5\u8bc6\uff01?<\/p>\n
                                  \u6700\u540e<\/h1>\n
                                  \u867d\u7136\u53ea\u662f\u5f00\u53d1\u4e86\u4e00\u4e2a\u7b80\u5355\u7684Todo\u5e94\u7528\u7a0b\u5e8f\uff0c\u4f46\u901a\u8fc7\u5b9e\u8df5\u5b66\u4e60\u4e86GraphQL\u7684\u57fa\u7840\u90e8\u5206\uff0c\u611f\u89c9\u5f88\u597d\uff01\u7531\u4e8e\u8fd8\u6709\u4e00\u4e9b\u5c1a\u672a\u5b66\u4e60\u7684\u8303\u56f4\uff0c\u6211\u5c06\u7ee7\u7eed\u52aa\u529b\u5b66\u4e60\u3002<\/p>\n
                                  \u611f\u8c22\u60a8\u9605\u8bfb\u5230\u8fd9\u91cc\uff01<\/p>\n
                                  \u8bf7\u53c2\u8003\u4ee5\u4e0b\u94fe\u63a5<\/h1>\n
                                   <\/p>\n","protected":false},"excerpt":{"rendered":"
                                  \u9996\u5148 \u4e3a\u4e86\u5b66\u4e60GraphQL\uff0c\u6211\u505a\u4e86\u4e00\u4e2aTodo\u5e94\u7528\u7a0b\u5e8f\u6765\u8fdb\u884c\u5b9e\u8df5\u3002 \u5728\u672c\u6587\u4e2d\uff0c\u6211\u5c06\u4f5c\u4e3a\u7b2c\u4e00\u90e8\u5206\u603b\u7ed3\u4e86\u4f7f\u7528Gr […]<\/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-47437","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"\n\u4f7f\u7528GraphQL\u3001Go\u3001React\u548cTypeScript\u5f00\u53d1\u7684Todo\u5e94\u7528\u7a0b\u5e8f\uff08\u540e\u7aef\u90e8\u5206\uff09 - 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\/\u4f7f\u7528graphql\u3001go\u3001react\u548ctypescript\u5f00\u53d1\u7684todo\u5e94\u7528\u7a0b\u5e8f\uff08\u540e\u7aef\u90e8\u5206\uff09\u3002\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u4f7f\u7528GraphQL\u3001Go\u3001React\u548cTypeScript\u5f00\u53d1\u7684Todo\u5e94\u7528\u7a0b\u5e8f\uff08\u540e\u7aef\u90e8\u5206\uff09\" \/>\n<meta property=\"og:description\" content=\"\u9996\u5148 \u4e3a\u4e86\u5b66\u4e60GraphQL\uff0c\u6211\u505a\u4e86\u4e00\u4e2aTodo\u5e94\u7528\u7a0b\u5e8f\u6765\u8fdb\u884c\u5b9e\u8df5\u3002 \u5728\u672c\u6587\u4e2d\uff0c\u6211\u5c06\u4f5c\u4e3a\u7b2c\u4e00\u90e8\u5206\u603b\u7ed3\u4e86\u4f7f\u7528Gr […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/zh\/blog\/\u4f7f\u7528graphql\u3001go\u3001react\u548ctypescript\u5f00\u53d1\u7684todo\u5e94\u7528\u7a0b\u5e8f\uff08\u540e\u7aef\u90e8\u5206\uff09\u3002\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:published_time\" content=\"2023-03-21T04:39:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-04T04:34:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d7ed8913a08637a6a457f\/8-0.gif\" \/>\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=\"4 \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%bd%bf%e7%94%a8graphql%e3%80%81go%e3%80%81react%e5%92%8ctypescript%e5%bc%80%e5%8f%91%e7%9a%84todo%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%ef%bc%88%e5%90%8e%e7%ab%af%e9%83%a8%e5%88%86%ef%bc%89%e3%80%82\/\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8graphql%e3%80%81go%e3%80%81react%e5%92%8ctypescript%e5%bc%80%e5%8f%91%e7%9a%84todo%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%ef%bc%88%e5%90%8e%e7%ab%af%e9%83%a8%e5%88%86%ef%bc%89%e3%80%82\/\",\"name\":\"\u4f7f\u7528GraphQL\u3001Go\u3001React\u548cTypeScript\u5f00\u53d1\u7684Todo\u5e94\u7528\u7a0b\u5e8f\uff08\u540e\u7aef\u90e8\u5206\uff09 - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\"},\"datePublished\":\"2023-03-21T04:39:15+00:00\",\"dateModified\":\"2024-05-04T04:34:35+00:00\",\"author\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/6530331a63adef3b3443a1fab53a0e6e\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8graphql%e3%80%81go%e3%80%81react%e5%92%8ctypescript%e5%bc%80%e5%8f%91%e7%9a%84todo%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%ef%bc%88%e5%90%8e%e7%ab%af%e9%83%a8%e5%88%86%ef%bc%89%e3%80%82\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8graphql%e3%80%81go%e3%80%81react%e5%92%8ctypescript%e5%bc%80%e5%8f%91%e7%9a%84todo%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%ef%bc%88%e5%90%8e%e7%ab%af%e9%83%a8%e5%88%86%ef%bc%89%e3%80%82\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8graphql%e3%80%81go%e3%80%81react%e5%92%8ctypescript%e5%bc%80%e5%8f%91%e7%9a%84todo%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%ef%bc%88%e5%90%8e%e7%ab%af%e9%83%a8%e5%88%86%ef%bc%89%e3%80%82\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.silicloud.com\/zh\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u4f7f\u7528GraphQL\u3001Go\u3001React\u548cTypeScript\u5f00\u53d1\u7684Todo\u5e94\u7528\u7a0b\u5e8f\uff08\u540e\u7aef\u90e8\u5206\uff09\"}]},{\"@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%bd%bf%e7%94%a8graphql%e3%80%81go%e3%80%81react%e5%92%8ctypescript%e5%bc%80%e5%8f%91%e7%9a%84todo%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%ef%bc%88%e5%90%8e%e7%ab%af%e9%83%a8%e5%88%86%ef%bc%89%e3%80%82\/#local-main-organization-logo\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Blog - Silicon Cloud\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u4f7f\u7528GraphQL\u3001Go\u3001React\u548cTypeScript\u5f00\u53d1\u7684Todo\u5e94\u7528\u7a0b\u5e8f\uff08\u540e\u7aef\u90e8\u5206\uff09 - 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\/\u4f7f\u7528graphql\u3001go\u3001react\u548ctypescript\u5f00\u53d1\u7684todo\u5e94\u7528\u7a0b\u5e8f\uff08\u540e\u7aef\u90e8\u5206\uff09\u3002\/","og_locale":"zh_CN","og_type":"article","og_title":"\u4f7f\u7528GraphQL\u3001Go\u3001React\u548cTypeScript\u5f00\u53d1\u7684Todo\u5e94\u7528\u7a0b\u5e8f\uff08\u540e\u7aef\u90e8\u5206\uff09","og_description":"\u9996\u5148 \u4e3a\u4e86\u5b66\u4e60GraphQL\uff0c\u6211\u505a\u4e86\u4e00\u4e2aTodo\u5e94\u7528\u7a0b\u5e8f\u6765\u8fdb\u884c\u5b9e\u8df5\u3002 \u5728\u672c\u6587\u4e2d\uff0c\u6211\u5c06\u4f5c\u4e3a\u7b2c\u4e00\u90e8\u5206\u603b\u7ed3\u4e86\u4f7f\u7528Gr […]","og_url":"https:\/\/www.silicloud.com\/zh\/blog\/\u4f7f\u7528graphql\u3001go\u3001react\u548ctypescript\u5f00\u53d1\u7684todo\u5e94\u7528\u7a0b\u5e8f\uff08\u540e\u7aef\u90e8\u5206\uff09\u3002\/","og_site_name":"Blog - Silicon Cloud","article_published_time":"2023-03-21T04:39:15+00:00","article_modified_time":"2024-05-04T04:34:35+00:00","og_image":[{"url":"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d7ed8913a08637a6a457f\/8-0.gif"}],"author":"\u97f5, \u79d1","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"\u97f5, \u79d1","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"4 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8graphql%e3%80%81go%e3%80%81react%e5%92%8ctypescript%e5%bc%80%e5%8f%91%e7%9a%84todo%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%ef%bc%88%e5%90%8e%e7%ab%af%e9%83%a8%e5%88%86%ef%bc%89%e3%80%82\/","url":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8graphql%e3%80%81go%e3%80%81react%e5%92%8ctypescript%e5%bc%80%e5%8f%91%e7%9a%84todo%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%ef%bc%88%e5%90%8e%e7%ab%af%e9%83%a8%e5%88%86%ef%bc%89%e3%80%82\/","name":"\u4f7f\u7528GraphQL\u3001Go\u3001React\u548cTypeScript\u5f00\u53d1\u7684Todo\u5e94\u7528\u7a0b\u5e8f\uff08\u540e\u7aef\u90e8\u5206\uff09 - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website"},"datePublished":"2023-03-21T04:39:15+00:00","dateModified":"2024-05-04T04:34:35+00:00","author":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/6530331a63adef3b3443a1fab53a0e6e"},"breadcrumb":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8graphql%e3%80%81go%e3%80%81react%e5%92%8ctypescript%e5%bc%80%e5%8f%91%e7%9a%84todo%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%ef%bc%88%e5%90%8e%e7%ab%af%e9%83%a8%e5%88%86%ef%bc%89%e3%80%82\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8graphql%e3%80%81go%e3%80%81react%e5%92%8ctypescript%e5%bc%80%e5%8f%91%e7%9a%84todo%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%ef%bc%88%e5%90%8e%e7%ab%af%e9%83%a8%e5%88%86%ef%bc%89%e3%80%82\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8graphql%e3%80%81go%e3%80%81react%e5%92%8ctypescript%e5%bc%80%e5%8f%91%e7%9a%84todo%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%ef%bc%88%e5%90%8e%e7%ab%af%e9%83%a8%e5%88%86%ef%bc%89%e3%80%82\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.silicloud.com\/zh\/blog\/"},{"@type":"ListItem","position":2,"name":"\u4f7f\u7528GraphQL\u3001Go\u3001React\u548cTypeScript\u5f00\u53d1\u7684Todo\u5e94\u7528\u7a0b\u5e8f\uff08\u540e\u7aef\u90e8\u5206\uff09"}]},{"@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%bd%bf%e7%94%a8graphql%e3%80%81go%e3%80%81react%e5%92%8ctypescript%e5%bc%80%e5%8f%91%e7%9a%84todo%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%ef%bc%88%e5%90%8e%e7%ab%af%e9%83%a8%e5%88%86%ef%bc%89%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\/47437","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=47437"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/47437\/revisions"}],"predecessor-version":[{"id":98348,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/47437\/revisions\/98348"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/media?parent=47437"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/categories?post=47437"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/tags?post=47437"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}