{"id":38412,"date":"2023-08-17T23:35:52","date_gmt":"2023-03-23T19:53:10","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%91todo%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%ef%bc%88%e5%89%8d%e7%ab%af%e9%83%a8%e5%88%86%ef%bc%89%e3%80%82\/"},"modified":"2024-04-30T18:58:41","modified_gmt":"2024-04-30T10:58:41","slug":"%e4%bd%bf%e7%94%a8graphql%e3%80%81go%e3%80%81react%e5%92%8ctypescript%e5%bc%80%e5%8f%91todo%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%ef%bc%88%e5%89%8d%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%91todo%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%ef%bc%88%e5%89%8d%e7%ab%af%e9%83%a8%e5%88%86%ef%bc%89%e3%80%82\/","title":{"rendered":"\u4f7f\u7528GraphQL\u3001Go\u3001React\u548cTypeScript\u5f00\u53d1ToDo\u5e94\u7528\u7a0b\u5e8f\uff08\u524d\u7aef\u90e8\u5206\uff09"},"content":{"rendered":"

\u8fd9\u7bc7\u6587\u7ae0\u662f HRBrain Advent Calendar 2023 \u4e2d\u7b2c\u516b\u5929\u7684\u6587\u7ae0\u3002<\/p>\n

 <\/p>\n

\u9996\u5148<\/h1>\n

\u4e3a\u4e86\u5b66\u4e60GraphQL\uff0c\u6211\u5c1d\u8bd5\u521b\u5efa\u4e86\u4e00\u4e2aTodo\u5e94\u7528\u7a0b\u5e8f\uff0c\u5e76\u8fdb\u884c\u4e86\u4e00\u6b21\u5b9e\u8df5\u3002<\/p>\n

\u5728\u672c\u6587\u4e2d\uff0c\u4f5c\u4e3a\u7b2c\u4e8c\u90e8\u5206\uff0c\u6211\u603b\u7ed3\u4e86\u4f7f\u7528GraphQL\u67e5\u8be2\u8fdb\u884cTodo\u5e94\u7528\u7a0b\u5e8f\u524d\u7aef\u5f00\u53d1\u7684\u6b65\u9aa4\u3002<\/p>\n

\u8bf7\u53c2\u9605\u90e8\u52061\u7684\u540e\u7aef\u7f16\u8f91\u5185\u5bb9\u3002<\/p>\n

 <\/p>\n

\u4e0b\u9762\u662f\u4e00\u4e2a\u6f5c\u5728\u7684\u4e2d\u56fd\u7684\u7ffb\u8bd1\u9009\u9879:
\n\u6240\u4f7f\u7528\u7684\u6280\u672f\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\u80fd\u6839\u636eGraphQL\u6a21\u5f0f\u5b9a\u4e49\u81ea\u52a8\u751f\u6210Go\u548cTypeScript\u4ee3\u7801\u7684\u5e93\u3002
\nxorm\u662fGo\u7684ORM\u5e93\uff0c\u4f7f\u7528Postgres\u4f5c\u4e3a\u6570\u636e\u5e93\u3002<\/p>\n

\u5f85\u529e\u4e8b\u9879\u5e94\u7528\u7684\u6982\u8ff0<\/h1>\n
\"todoapp.gif\"<\/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

\u4ee5\u4e0b\u662f\u76ee\u5f55\u7ed3\u6784\uff0c\u5e76\u4e14\u5728\u672c\u6587\u4e2d\u6211\u4eec\u5c06\u521b\u5efa\u524d\u7aef\u5e94\u7528\u7a0b\u5e8f\u4ee3\u7801\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\u64cd\u4f5c\u3002<\/h1>\n
\u73b0\u5728\uff0c\u8ba9\u6211\u4eec\u89e3\u91ca\u4e00\u4e0b\u4f7f\u7528GraphQL\u8fdb\u884cTodo\u5e94\u7528\u7a0b\u5e8f\u7684\u524d\u7aef\u5f00\u53d1\u6b65\u9aa4\u3002<\/p>\n
\u524d\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
          GraphQL Code Generator\u7684\u914d\u7f6e<\/ol>\n<\/li>\n<\/ol>\n
           <\/p>\n
            \n
          1. \n
              GraphQL \u67e5\u8be2\u548c\u53d8\u66f4\u7684\u5b9a\u4e49<\/ol>\n<\/li>\n<\/ol>\n
               <\/p>\n
                \n
              1. \n
                  \u901a\u8fc7graphql-codegen\u81ea\u52a8\u751f\u6210\u4ee3\u7801<\/ol>\n<\/li>\n<\/ol>\n
                   <\/p>\n
                    \n
                  1. \n
                      Apollo Client\u7684\u914d\u7f6e<\/ol>\n<\/li>\n<\/ol>\n
                       <\/p>\n
                        \u7ec4\u4ef6\u7684\u5b9e\u73b0<\/ol>\n
                        1. \u9879\u76ee\u7684\u5efa\u7acb<\/h3>\n
                        \u9996\u5148\uff0c\u521b\u5efa\u4e00\u4e2a\u65b0\u76ee\u5f55\uff0c\u5e76\u521b\u5efa\u4e00\u4e2aReact\u5e94\u7528\u7a0b\u5e8f\u7684\u6a21\u677f\u3002\u60a8\u53ef\u4ee5\u4f7f\u7528create-react-app\u5de5\u5177\u548cTypeScript\u6a21\u677f\u6765\u5f00\u59cb\u9879\u76ee\u3002<\/p>\n
                        cd<\/span> ~\/go\/src\/github.com\/[username]\/todoapp-graphql-go-react\r\nmkdir <\/span>front\r\ncd <\/span>front\r\nnpx create-react-app front --template<\/span> typescript\r\n<\/code><\/pre>\n
                        \u63a5\u4e0b\u6765\uff0c\u6211\u4eec\u9700\u8981\u5b89\u88c5GraphQL\u6240\u9700\u7684\u8f6f\u4ef6\u5305\u3002<\/p>\n
                        npm install <\/span>graphql\r\nnpm install<\/span> --save-dev<\/span> @graphql-codegen\/cli @graphql-codegen\/schema-ast @graphql-codegen\/fragment-matcher @graphql-codegen\/typescript @graphql-codegen\/typescript-operations @apollo\/client @graphql-codegen\/typescript-react-apollo\r\n<\/code><\/pre>\n
                        2. GraphQL Code Generator\u7684\u914d\u7f6e<\/h3>\n
                        \u63a5\u4e0b\u6765\uff0c\u521b\u5efacodegen.yml\u6587\u4ef6\uff0c\u5e76\u8fdb\u884cGraphQL Code Generator\u7684\u914d\u7f6e\u3002\u8be5\u5de5\u5177\u53ef\u4ee5\u6839\u636eGraphQL\u67e5\u8be2\u548c\u6a21\u5f0f\u81ea\u52a8\u751f\u6210TypeScript\u7c7b\u578b\u5b9a\u4e49\u548cReact Hooks\u3002<\/p>\n
                        # GraphQL\u30b9\u30ad\u30fc\u30de\u3068\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u306e\u30bd\u30fc\u30b9\u3092\u5b9a\u7fa9<\/span>\r\nschema<\/span>:<\/span>\r\n  -<\/span> ..\/*.graphqls<\/span>\r\n\r\ndocuments<\/span>:<\/span>\r\n  -<\/span> .\/graphql\/mutation\/*.graphql<\/span>\r\n  -<\/span> .\/graphql\/query\/*.graphql<\/span>\r\n\r\n# \u751f\u6210\u3055\u308c\u308b\u51fa\u529b\u3068\u30d7\u30e9\u30b0\u30a4\u30f3\u306e\u8a2d\u5b9a<\/span>\r\ngenerates<\/span>:<\/span>\r\n  # \u30b9\u30ad\u30fc\u30de\u3092AST\u5f62\u5f0f\u3067\u751f\u6210<\/span>\r\n  graphql\/schema.graphql<\/span>:<\/span>\r\n    plugins<\/span>:<\/span>\r\n      -<\/span> schema-ast<\/span>\r\n\r\n  # \u30d5\u30e9\u30b0\u30e1\u30f3\u30c8\u30de\u30c3\u30c1\u30e3\u30fc\u306e\u751f\u6210<\/span>\r\n  src\/types\/gen\/possibleTypes-result.ts<\/span>:<\/span>\r\n    plugins<\/span>:<\/span>\r\n      -<\/span> fragment-matcher<\/span>\r\n    config<\/span>:<\/span>\r\n      apolloClientVersion<\/span>:<\/span> 3<\/span>\r\n\r\n  # TypeScript\u306e\u578b\u3001\u64cd\u4f5c\u3001\u304a\u3088\u3073React hooks\u306e\u751f\u6210<\/span>\r\n  src\/types\/gen\/api.ts<\/span>:<\/span>\r\n    plugins<\/span>:<\/span>\r\n      -<\/span> typescript<\/span>\r\n      -<\/span> typescript-operations<\/span>\r\n      -<\/span> typescript-react-apollo<\/span>\r\n    config<\/span>:<\/span>\r\n      withComponent<\/span>:<\/span> false<\/span>\r\n      withHooks<\/span>:<\/span> true<\/span>\r\n\r\n# \u30b0\u30ed\u30fc\u30d0\u30eb\u8a2d\u5b9a<\/span>\r\nconfig<\/span>:<\/span>\r\n  gqlImport<\/span>:<\/span> '<\/span>@apollo\/client#gql'<\/span>\r\n  scalars<\/span>:<\/span>\r\n    Date<\/span>:<\/span> string<\/span>\r\n    NumberID<\/span>:<\/span> number<\/span>\r\n    Time<\/span>:<\/span> string<\/span>\r\n    Version<\/span>:<\/span> number<\/span>\r\n<\/code><\/pre>\n
                        \u8fd9\u4e2a\u8bbe\u7f6e\u6587\u4ef6\u5c06\u6839\u636eGraphQL\u6a21\u5f0f\u751f\u6210\u6240\u9700\u7684\u7c7b\u578b\u548c\u7ec4\u4ef6\u6846\u67b6\u3002<\/p>\n
                        3. GraphQL \u67e5\u8be2\u548c\u53d8\u66f4\u7684\u5b9a\u4e49<\/h3>\n
                        GraphQL\u5b9a\u4e49\u4e86\u67e5\u8be2\uff08\u83b7\u53d6\u6570\u636e\uff09\u548c\u53d8\u5f02\uff08\u66f4\u65b0\u6570\u636e\uff09\u3002\u5b83\u4eec\u662f\u6307\u5b9a\u5411\u670d\u52a1\u5668\u8bf7\u6c42\u54ea\u4e9b\u6570\u636e\u6216\u6267\u884c\u54ea\u4e9b\u64cd\u4f5c\u7684\u91cd\u8981\u7ec4\u6210\u90e8\u5206\u3002<\/p>\n
                        \u67e5\u8be2\u7684\u793a\u4f8b<\/h4>\n
                        # GetAllTodos\u30af\u30a8\u30ea\u306f\u3001\u30b5\u30fc\u30d0\u30fc\u304b\u3089\u5168\u3066\u306eTodo\u9805\u76ee\u3092\u53d6\u5f97\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002<\/span>\r\nquery<\/span> GetAllTodos<\/span> {<\/span>\r\n  todos<\/span> {<\/span>\r\n    id<\/span>    # \u5404Todo\u9805\u76ee\u306e\u30e6\u30cb\u30fc\u30af\u306aID<\/span>\r\n    text<\/span>  # Todo\u9805\u76ee\u306e\u30c6\u30ad\u30b9\u30c8\u5185\u5bb9<\/span>\r\n    done<\/span>  # Todo\u304c\u5b8c\u4e86\u3057\u305f\u304b\u3069\u3046\u304b\u306e\u72b6\u614b<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
                        \u7a81\u53d8\u7684\u4f8b\u5b50<\/h4>\n
                        # CreateTodo\u30df\u30e5\u30fc\u30c6\u30fc\u30b7\u30e7\u30f3\u306f\u3001\u65b0\u3057\u3044Todo\u9805\u76ee\u3092\u4f5c\u6210\u3059\u308b\u305f\u3081\u306b\u4f7f\u7528\u3055\u308c\u307e\u3059\u3002<\/span>\r\nmutation<\/span> CreateTodo<\/span>(<\/span>$todoInput<\/span>:<\/span> CreateTodoInput<\/span>!)<\/span> {<\/span>\r\n  createTodo<\/span>(<\/span>todoInput<\/span>:<\/span> $todoInput<\/span>)<\/span> {<\/span>\r\n    id<\/span>    # \u4f5c\u6210\u3055\u308c\u305fTodo\u9805\u76ee\u306eID<\/span>\r\n    text<\/span>  # \u4f5c\u6210\u3055\u308c\u305fTodo\u9805\u76ee\u306e\u30c6\u30ad\u30b9\u30c8<\/span>\r\n    done<\/span>  # \u4f5c\u6210\u3055\u308c\u305fTodo\u306e\u72b6\u614b\uff08\u30c7\u30d5\u30a9\u30eb\u30c8\u3067\u306f\u672a\u5b8c\u4e86\uff09<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
                        \u8fd9\u4e9b\u67e5\u8be2\u548c\u53d8\u66f4\u5b9a\u4e49\u4e86\u5e94\u7528\u7a0b\u5e8f\u5982\u4f55\u5728\u670d\u52a1\u5668\u548c\u5e94\u7528\u7a0b\u5e8f\u4e4b\u95f4\u4ea4\u6362\u6570\u636e\u3002<\/p>\n
                        4. \u4f7f\u7528 graphql-codegen \u8fdb\u884c\u4ee3\u7801\u81ea\u52a8\u751f\u6210\u3002<\/h3>\n
                        \u7136\u540e\uff0c\u4f7f\u7528GraphQL\u4ee3\u7801\u751f\u6210\u5668\uff0c\u6839\u636e\u4e0a\u8ff0\u5b9a\u4e49\u7684\u67e5\u8be2\u548c\u7a81\u53d8\u751f\u6210\u4ee3\u7801\u3002<\/p>\n
                        npm run graphql-codegen --config<\/span> codegen.yml\r\n<\/code><\/pre>\n
                        \u901a\u8fc7\u8be5\u547d\u4ee4\uff0c\u5c06\u81ea\u52a8\u521b\u5efa\u6240\u9700\u7684\u7c7b\u578b\u548c\u94a9\u5b50\u6765\u64cd\u4f5cAPI\uff0c\u5927\u5927\u52a0\u5feb\u5f00\u53d1\u6d41\u7a0b\u3002<\/p>\n
                        5. Apollo Client \u7684\u914d\u7f6e<\/h3>\n
                        Apollo Client \u662f\u4e00\u500b\u7528\u65bc\u7ba1\u7406 React \u61c9\u7528\u7a0b\u5f0f\u548c GraphQL \u4f3a\u670d\u5668\u4e4b\u9593\u901a\u8a0a\u7684\u51fd\u5f0f\u5eab\u3002\u5728\u9019\u88e1\uff0c\u6211\u5011\u6703\u8a2d\u5b9a Apollo Client \u4e26\u5efa\u7acb\u8207 GraphQL \u4f3a\u670d\u5668\u7684\u9023\u63a5\u3002<\/p>\n
                        import<\/span> React<\/span> from<\/span> '<\/span>react<\/span>'<\/span>;<\/span>\r\nimport<\/span> ReactDOM<\/span> from<\/span> '<\/span>react-dom\/client<\/span>'<\/span>;<\/span>\r\nimport<\/span> '<\/span>.\/index.css<\/span>'<\/span>;<\/span>\r\nimport<\/span> App<\/span> from<\/span> '<\/span>.\/App<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> ApolloClient<\/span>,<\/span> InMemoryCache<\/span>,<\/span> ApolloProvider<\/span> }<\/span> from<\/span> '<\/span>@apollo\/client<\/span>'<\/span>;<\/span>\r\n\r\n\/\/ Apollo Client\u306e\u8a2d\u5b9a<\/span>\r\nconst<\/span> client<\/span> =<\/span> new<\/span> ApolloClient<\/span>({<\/span>\r\n  uri<\/span>:<\/span> '<\/span>http:\/\/localhost:8081\/query<\/span>'<\/span>,<\/span>  \/\/ GraphQL\u30b5\u30fc\u30d0\u30fc\u306e\u30a8\u30f3\u30c9\u30dd\u30a4\u30f3\u30c8<\/span>\r\n  cache<\/span>:<\/span> new<\/span> InMemoryCache<\/span>(),<\/span>          \/\/ \u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u30b5\u30a4\u30c9\u306e\u30ad\u30e3\u30c3\u30b7\u30e5\u7ba1\u7406<\/span>\r\n});<\/span>\r\n\r\nconst<\/span> root<\/span> =<\/span> ReactDOM<\/span>.<\/span>createRoot<\/span>(<\/span>document<\/span>.<\/span>getElementById<\/span>(<\/span>'<\/span>root<\/span>'<\/span>)<\/span> as<\/span> HTMLElement<\/span>);<\/span>\r\nroot<\/span>.<\/span>render<\/span>(<\/span>\r\n  <<\/span>React<\/span>.<\/span>StrictMode<\/span>><\/span>\r\n    <<\/span>ApolloProvider<\/span> client<\/span>=<\/span>{<\/span>client<\/span>}<\/span>><\/span>   {<\/span>\/* Apollo Client\u3092React\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u5168\u4f53\u3067\u5229\u7528\u53ef\u80fd\u306b\u3059\u308b *\/<\/span>}<\/span>\r\n      <<\/span>App<\/span> \/><\/span>\r\n    <\/<\/span>ApolloProvider<\/span>><\/span>\r\n  <\/<\/span>React<\/span>.<\/span>StrictMode<\/span>><\/span>\r\n);<\/span>\r\n<\/code><\/pre>\n
                        \u901a\u904e\u6b64\u8a2d\u7f6e\uff0c\u61c9\u7528\u7a0b\u5f0f\u53ef\u4ee5\u5411GraphQL\u670d\u52d9\u5668\u767c\u9001\u67e5\u8a62\u4e26\u7372\u53d6\u6578\u64da\u3002<\/p>\n
                        6. \u7ec4\u4ef6\u7684\u5b9e\u73b0<\/h3>\n
                        \u6700\u540e\uff0c\u6211\u4eec\u5c06\u5b9e\u73b0Todo\u5e94\u7528\u7a0b\u5e8f\u7684\u4e3b\u8981\u7528\u6237\u754c\u9762\u7ec4\u4ef6\u3002\u4e0b\u9762\u5c55\u793a\u4e86\u663e\u793aTodo\u5217\u8868\u548c\u6dfb\u52a0\u65b0Todo\u7684\u8868\u5355\u7684\u793a\u4f8b\u5b9e\u73b0\u3002<\/p>\n
                        \u5f85\u529e\u4e8b\u9879\u5217\u8868\u7ec4\u4ef6\u7684\u4ee3\u7801<\/h4>\n
                        import<\/span> React<\/span> from<\/span> '<\/span>react<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> DeleteTodoDocument<\/span>,<\/span> useGetAllTodosQuery<\/span>,<\/span> UpdateTodoStatusDocument<\/span> }<\/span> from<\/span> '<\/span>..\/types\/gen\/api<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> useMutation<\/span> }<\/span> from<\/span> '<\/span>@apollo\/client<\/span>'<\/span>;<\/span>\r\n\r\nexport<\/span> const<\/span> TodoList<\/span>:<\/span> React<\/span>.<\/span>FC<\/span> =<\/span> ()<\/span> =><\/span> {<\/span>\r\n  const<\/span> {<\/span> data<\/span>,<\/span> loading<\/span>,<\/span> error<\/span>,<\/span> refetch<\/span> }<\/span> =<\/span> useGetAllTodosQuery<\/span>();<\/span>  \/\/ \u30b5\u30fc\u30d0\u30fc\u304b\u3089Todo\u30ea\u30b9\u30c8\u3092\u53d6\u5f97<\/span>\r\n  const<\/span> [<\/span>updateTodoStatus<\/span>]<\/span> =<\/span> useMutation<\/span>(<\/span>UpdateTodoStatusDocument<\/span>);<\/span> \/\/ Todo\u30b9\u30c6\u30fc\u30bf\u30b9\u3092\u66f4\u65b0\u3059\u308b\u30df\u30e5\u30fc\u30c6\u30fc\u30b7\u30e7\u30f3<\/span>\r\n  const<\/span> [<\/span>deleteTodo<\/span>]<\/span> =<\/span> useMutation<\/span>(<\/span>DeleteTodoDocument<\/span>);<\/span>             \/\/ Todo\u3092\u524a\u9664\u3059\u308b\u30df\u30e5\u30fc\u30c6\u30fc\u30b7\u30e7\u30f3<\/span>\r\n\r\n  \/\/ Todo\u306e\u30b9\u30c6\u30fc\u30bf\u30b9\u3092\u66f4\u65b0\u3059\u308b\u95a2\u6570<\/span>\r\n  const<\/span> handleUpdateTodoStatus<\/span> =<\/span> async <\/span>(<\/span>todoId<\/span>:<\/span> string<\/span>,<\/span> done<\/span>:<\/span> boolean<\/span>)<\/span> =><\/span> {<\/span>\r\n    try<\/span> {<\/span>\r\n      await<\/span> updateTodoStatus<\/span>({<\/span> variables<\/span>:<\/span> {<\/span> todoId<\/span>,<\/span> done<\/span> }<\/span> });<\/span>\r\n      refetch<\/span>();<\/span>\r\n    }<\/span> catch <\/span>(<\/span>error<\/span>)<\/span> {<\/span>\r\n      console<\/span>.<\/span>error<\/span>(<\/span>'<\/span>Error updating todo status: <\/span>'<\/span>,<\/span> error<\/span>);<\/span>\r\n    }<\/span>\r\n  };<\/span>\r\n\r\n  \/\/ Todo\u3092\u524a\u9664\u3059\u308b\u95a2\u6570<\/span>\r\n  const<\/span> handleDeleteTodo<\/span> =<\/span> async <\/span>(<\/span>todoId<\/span>:<\/span> string<\/span>)<\/span> =><\/span> {<\/span>\r\n    try<\/span> {<\/span>\r\n      await<\/span> deleteTodo<\/span>({<\/span> variables<\/span>:<\/span> {<\/span> todoId<\/span> }<\/span> });<\/span>\r\n      refetch<\/span>();<\/span>\r\n    }<\/span> catch <\/span>(<\/span>error<\/span>)<\/span> {<\/span>\r\n      console<\/span>.<\/span>error<\/span>(<\/span>'<\/span>Error deleting todo: <\/span>'<\/span>,<\/span> error<\/span>);<\/span>\r\n    }<\/span>\r\n  };<\/span>\r\n\r\n  \/\/ \u30c7\u30fc\u30bf\u306e\u8aad\u307f\u8fbc\u307f\u4e2d\u3001\u307e\u305f\u306f\u30a8\u30e9\u30fc\u304c\u3042\u308b\u5834\u5408\u306e\u51e6\u7406<\/span>\r\n  if <\/span>(<\/span>loading<\/span>)<\/span> return<\/span> <<\/span>p<\/span>><\/span>Loading...<\/<\/span>p<\/span>>;<\/span>\r\n  if <\/span>(<\/span>error<\/span>)<\/span> return<\/span> <<\/span>p<\/span>><\/span>Error: {<\/span>error<\/span>.<\/span>message<\/span>}<\/span><\/<\/span>p<\/span>>;<\/span>\r\n\r\n  \/\/ Todo\u30ea\u30b9\u30c8\u306eUI\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0<\/span>\r\n  return <\/span>(<\/span>\r\n    <<\/span>div<\/span>><\/span>\r\n      <<\/span>h2<\/span>><\/span>Todo\u30ea\u30b9\u30c8<\/<\/span>h2<\/span>><\/span>\r\n      {<\/span>\/* \u672a\u5b8c\u4e86\u306eTodo\u9805\u76ee\u3092\u30ea\u30b9\u30c8\u30a2\u30c3\u30d7 *\/<\/span>}<\/span>\r\n      <<\/span>h3<\/span>><\/span>\u672a\u5b8c\u4e86\u306eTODO<\/<\/span>h3<\/span>><\/span>\r\n      <<\/span>ul<\/span>><\/span>\r\n        {<\/span>data<\/span>?.<\/span>todos<\/span>.<\/span>map<\/span>(<\/span>\r\n          (<\/span>todo<\/span>)<\/span> =><\/span>\r\n            todo<\/span>.<\/span>done<\/span> ||<\/span> (<\/span> \/* \u672a\u5b8c\u4e86\u306eTodo\u306e\u307f\u8868\u793a *\/<\/span>\r\n              <<\/span>li<\/span> key<\/span>=<\/span>{<\/span>todo<\/span>.<\/span>id<\/span>}<\/span>><\/span>\r\n                {<\/span>todo<\/span>.<\/span>text<\/span>}<\/span>\r\n                <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>()<\/span> =><\/span> handleUpdateTodoStatus<\/span>(<\/span>todo<\/span>.<\/span>id<\/span>,<\/span> true<\/span>)<\/span>}<\/span>><\/span>\u5b8c\u4e86<\/<\/span>button<\/span>><\/span>\r\n                <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>()<\/span> =><\/span> handleDeleteTodo<\/span>(<\/span>todo<\/span>.<\/span>id<\/span>)<\/span>}<\/span>><\/span>\u524a\u9664<\/<\/span>button<\/span>><\/span>\r\n              <\/<\/span>li<\/span>><\/span>\r\n            )<\/span>\r\n        )<\/span>}<\/span>\r\n      <\/<\/span>ul<\/span>><\/span>\r\n\r\n     {<\/span>\/* \u5b8c\u4e86\u3057\u305fTodo\u9805\u76ee\u3092\u30ea\u30b9\u30c8\u30a2\u30c3\u30d7 *\/<\/span>}<\/span>\r\n      <<\/span>h3<\/span>><\/span>\u5b8c\u4e86\u3057\u305fTODO<\/<\/span>h3<\/span>><\/span>\r\n      <<\/span>ul<\/span>><\/span>\r\n        {<\/span>data<\/span>?.<\/span>todos<\/span>.<\/span>map<\/span>(<\/span>\r\n          (<\/span>todo<\/span>)<\/span> =><\/span>\r\n            todo<\/span>.<\/span>done<\/span> &&<\/span> (<\/span> \/* \u5b8c\u4e86\u3057\u305fTodo\u306e\u307f\u8868\u793a *\/<\/span>\r\n              <<\/span>li<\/span> key<\/span>=<\/span>{<\/span>todo<\/span>.<\/span>id<\/span>}<\/span>><\/span>\r\n                {<\/span>todo<\/span>.<\/span>text<\/span>}<\/span>\r\n                <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>()<\/span> =><\/span> handleUpdateTodoStatus<\/span>(<\/span>todo<\/span>.<\/span>id<\/span>,<\/span> false<\/span>)<\/span>}<\/span>><\/span>\u672a\u5b8c\u4e86\u306b\u623b\u3059<\/<\/span>button<\/span>><\/span>\r\n                <<\/span>button<\/span> onClick<\/span>=<\/span>{<\/span>()<\/span> =><\/span> handleDeleteTodo<\/span>(<\/span>todo<\/span>.<\/span>id<\/span>)<\/span>}<\/span>><\/span>\u524a\u9664<\/<\/span>button<\/span>><\/span>\r\n              <\/<\/span>li<\/span>><\/span>\r\n            )<\/span>\r\n        )<\/span>}<\/span>\r\n      <\/<\/span>ul<\/span>><\/span>\r\n    <\/<\/span>div<\/span>><\/span>\r\n  );<\/span>\r\n};<\/span>\r\n<\/code><\/pre>\n
                        \u521b\u5efaTodo\u8868\u5355\u7684\u4ee3\u7801<\/h4>\n
                        import<\/span> React<\/span>,<\/span> {<\/span> useState<\/span> }<\/span> from<\/span> '<\/span>react<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> useMutation<\/span> }<\/span> from<\/span> '<\/span>@apollo\/client<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> CreateTodoDocument<\/span>,<\/span> GetAllTodosDocument<\/span>,<\/span> GetAllTodosQuery<\/span> }<\/span> from<\/span> '<\/span>..\/types\/gen\/api<\/span>'<\/span>;<\/span>\r\n\r\nfunction<\/span> CreateTodoForm<\/span>()<\/span> {<\/span>\r\n  const<\/span> [<\/span>text<\/span>,<\/span> setText<\/span>]<\/span> =<\/span> useState<\/span>(<\/span>''<\/span>);<\/span> \/\/ \u65b0\u3057\u3044Todo\u306e\u30c6\u30ad\u30b9\u30c8\u3092\u4fdd\u6301\u3059\u308bstate<\/span>\r\n  const<\/span> [<\/span>createTodo<\/span>]<\/span> =<\/span> useMutation<\/span>(<\/span>CreateTodoDocument<\/span>,<\/span> {<\/span>\r\n    \/\/ \u65b0\u3057\u3044Todo\u3092\u8ffd\u52a0\u3057\u305f\u5f8c\u3001\u30ad\u30e3\u30c3\u30b7\u30e5\u3092\u66f4\u65b0\u3057\u3066UI\u3092\u81ea\u52d5\u7684\u306b\u53cd\u6620\u3055\u305b\u308b<\/span>\r\n    update<\/span>(<\/span>cache<\/span>,<\/span> {<\/span> data<\/span>:<\/span> {<\/span> createTodo<\/span> }<\/span> })<\/span> {<\/span>\r\n      const<\/span> existingTodos<\/span> =<\/span> cache<\/span>.<\/span>readQuery<\/span><<\/span>GetAllTodosQuery<\/span>><\/span>({<\/span> query<\/span>:<\/span> GetAllTodosDocument<\/span> });<\/span>\r\n\r\n      if <\/span>(<\/span>existingTodos<\/span> &&<\/span> createTodo<\/span>)<\/span> {<\/span>\r\n        cache<\/span>.<\/span>writeQuery<\/span>({<\/span>\r\n          query<\/span>:<\/span> GetAllTodosDocument<\/span>,<\/span>\r\n          data<\/span>:<\/span> {<\/span> todos<\/span>:<\/span> [...<\/span>existingTodos<\/span>.<\/span>todos<\/span>,<\/span> createTodo<\/span>]<\/span> },<\/span>\r\n        });<\/span>\r\n      }<\/span>\r\n    },<\/span>\r\n  });<\/span>\r\n\r\n  \/\/ \u30d5\u30a9\u30fc\u30e0\u306e\u30b5\u30d6\u30df\u30c3\u30c8\u51e6\u7406<\/span>\r\n  const<\/span> handleSubmit<\/span> =<\/span> async <\/span>(<\/span>event<\/span>:<\/span> {<\/span> preventDefault<\/span>:<\/span> ()<\/span> =><\/span> void<\/span> })<\/span> =><\/span> {<\/span>\r\n    event<\/span>.<\/span>preventDefault<\/span>();<\/span>\r\n\r\n    if <\/span>(<\/span>!<\/span>text<\/span>.<\/span>trim<\/span>())<\/span> return<\/span>;<\/span>\r\n\r\n    try<\/span> {<\/span>\r\n      const<\/span> todoInput<\/span> =<\/span> {<\/span> text<\/span> };<\/span>\r\n      await<\/span> createTodo<\/span>({<\/span> variables<\/span>:<\/span> {<\/span> todoInput<\/span> }<\/span> });<\/span>\r\n\r\n      setText<\/span>(<\/span>''<\/span>);<\/span>\r\n    }<\/span> catch <\/span>(<\/span>error<\/span>)<\/span> {<\/span>\r\n      console<\/span>.<\/span>error<\/span>(<\/span>'<\/span>Error adding todo: <\/span>'<\/span>,<\/span> error<\/span>);<\/span>\r\n    }<\/span>\r\n  };<\/span>\r\n\r\n  \/\/ Todo\u4f5c\u6210\u30d5\u30a9\u30fc\u30e0\u306eUI\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0<\/span>\r\n  return <\/span>(<\/span>\r\n    <<\/span>form<\/span> onSubmit<\/span>=<\/span>{<\/span>handleSubmit<\/span>}<\/span>><\/span>\r\n      <<\/span>input<\/span> type<\/span>=<\/span>'text'<\/span> value<\/span>=<\/span>{<\/span>text<\/span>}<\/span> onChange<\/span>=<\/span>{<\/span>(<\/span>event<\/span>)<\/span> =><\/span> setText<\/span>(<\/span>event<\/span>.<\/span>target<\/span>.<\/span>value<\/span>)<\/span>}<\/span> placeholder<\/span>=<\/span>'Add new todo'<\/span> \/><\/span>\r\n      <<\/span>button<\/span> type<\/span>=<\/span>'submit'<\/span>><\/span>Add<\/<\/span>button<\/span>><\/span>\r\n    <\/<\/span>form<\/span>><\/span>\r\n  );<\/span>\r\n}<\/span>\r\n\r\nexport<\/span> default<\/span> CreateTodoForm<\/span>;<\/span>\r\n<\/code><\/pre>\n
                        \u8fd9\u662f\u4f7f\u7528GraphQL\u5f00\u53d1Todo\u5e94\u7528\u524d\u7aef\u7684\u57fa\u672c\u6b65\u9aa4\u3002\u6839\u636e\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\u6280\u672f\u7684\u57fa\u672c\u77e5\u8bc6\uff01?<\/p>\n
                        \u6700\u540e<\/h1>\n
                        \u867d\u7136\u8fd9\u53ea\u662f\u4e00\u4e2a\u7b80\u5355\u7684Todo\u5e94\u7528\u7a0b\u5e8f\u5f00\u53d1\uff0c\u4f46\u901a\u8fc7\u5b9e\u9645\u64cd\u4f5c\u5b66\u4e60GraphQL\u7684\u57fa\u672c\u90e8\u5206\u975e\u5e38\u6709\u4ef7\u503c\uff01\u5c3d\u7ba1\u4ecd\u6709\u4e9b\u5730\u65b9\u8fd8\u6ca1\u5b8c\u5168\u638c\u63e1\uff0c\u4f46\u6211\u5c06\u7ee7\u7eed\u5b66\u4e60\u4e0b\u53bb\u3002\u611f\u8c22\u5927\u5bb6\u4e00\u76f4\u4ee5\u6765\u7684\u9605\u8bfb\uff01<\/p>\n
                        \u5728HRBrain\u6211\u4eec\u6b63\u5728\u62db\u52df\u613f\u610f\u548c\u6211\u4eec\u5408\u4f5c\u7684\u4f19\u4f34\u3002\u5982\u679c\u60a8\u6709\u5174\u8da3\uff0c\u8bf7\u52a1\u5fc5\u7533\u8bf7\u3002<\/p>\n
                         <\/p>\n
                        \u8bf7\u53c2\u8003\u4ee5\u4e0b\u94fe\u63a5\u3002<\/h1>\n
                         <\/p>\n","protected":false},"excerpt":{"rendered":"
                        \u8fd9\u7bc7\u6587\u7ae0\u662f HRBrain Advent Calendar 2023 \u4e2d\u7b2c\u516b\u5929\u7684\u6587\u7ae0\u3002   \u9996\u5148 \u4e3a […]<\/p>\n","protected":false},"author":12,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-38412","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"\n\u4f7f\u7528GraphQL\u3001Go\u3001React\u548cTypeScript\u5f00\u53d1ToDo\u5e94\u7528\u7a0b\u5e8f\uff08\u524d\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\u53d1todo\u5e94\u7528\u7a0b\u5e8f\uff08\u524d\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\u53d1ToDo\u5e94\u7528\u7a0b\u5e8f\uff08\u524d\u7aef\u90e8\u5206\uff09\" \/>\n<meta property=\"og:description\" content=\"\u8fd9\u7bc7\u6587\u7ae0\u662f HRBrain Advent Calendar 2023 \u4e2d\u7b2c\u516b\u5929\u7684\u6587\u7ae0\u3002   \u9996\u5148 \u4e3a […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/zh\/blog\/\u4f7f\u7528graphql\u3001go\u3001react\u548ctypescript\u5f00\u53d1todo\u5e94\u7528\u7a0b\u5e8f\uff08\u524d\u7aef\u90e8\u5206\uff09\u3002\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:published_time\" content=\"2023-03-23T19:53:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-30T10:58:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d346c37434c4406c68db6\/10-0.gif\" \/>\n<meta name=\"author\" content=\"\u9038, \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=\"\u9038, \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%91todo%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%ef%bc%88%e5%89%8d%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%91todo%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%ef%bc%88%e5%89%8d%e7%ab%af%e9%83%a8%e5%88%86%ef%bc%89%e3%80%82\/\",\"name\":\"\u4f7f\u7528GraphQL\u3001Go\u3001React\u548cTypeScript\u5f00\u53d1ToDo\u5e94\u7528\u7a0b\u5e8f\uff08\u524d\u7aef\u90e8\u5206\uff09 - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\"},\"datePublished\":\"2023-03-23T19:53:10+00:00\",\"dateModified\":\"2024-04-30T10:58:41+00:00\",\"author\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/85c1dae56e6ea1e695c73d33c684d487\"},\"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%91todo%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%ef%bc%88%e5%89%8d%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%91todo%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%ef%bc%88%e5%89%8d%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%91todo%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%ef%bc%88%e5%89%8d%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\u53d1ToDo\u5e94\u7528\u7a0b\u5e8f\uff08\u524d\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\/85c1dae56e6ea1e695c73d33c684d487\",\"name\":\"\u9038, \u79d1\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c94f6d9cbbfbca863fab309840bd690c153c95f8490c290ad2ed54dd693dad16?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c94f6d9cbbfbca863fab309840bd690c153c95f8490c290ad2ed54dd693dad16?s=96&d=mm&r=g\",\"caption\":\"\u9038, \u79d1\"},\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/author\/keyi\/\"},{\"@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%91todo%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%ef%bc%88%e5%89%8d%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\u53d1ToDo\u5e94\u7528\u7a0b\u5e8f\uff08\u524d\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\u53d1todo\u5e94\u7528\u7a0b\u5e8f\uff08\u524d\u7aef\u90e8\u5206\uff09\u3002\/","og_locale":"zh_CN","og_type":"article","og_title":"\u4f7f\u7528GraphQL\u3001Go\u3001React\u548cTypeScript\u5f00\u53d1ToDo\u5e94\u7528\u7a0b\u5e8f\uff08\u524d\u7aef\u90e8\u5206\uff09","og_description":"\u8fd9\u7bc7\u6587\u7ae0\u662f HRBrain Advent Calendar 2023 \u4e2d\u7b2c\u516b\u5929\u7684\u6587\u7ae0\u3002   \u9996\u5148 \u4e3a […]","og_url":"https:\/\/www.silicloud.com\/zh\/blog\/\u4f7f\u7528graphql\u3001go\u3001react\u548ctypescript\u5f00\u53d1todo\u5e94\u7528\u7a0b\u5e8f\uff08\u524d\u7aef\u90e8\u5206\uff09\u3002\/","og_site_name":"Blog - Silicon Cloud","article_published_time":"2023-03-23T19:53:10+00:00","article_modified_time":"2024-04-30T10:58:41+00:00","og_image":[{"url":"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d346c37434c4406c68db6\/10-0.gif"}],"author":"\u9038, \u79d1","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"\u9038, \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%91todo%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%ef%bc%88%e5%89%8d%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%91todo%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%ef%bc%88%e5%89%8d%e7%ab%af%e9%83%a8%e5%88%86%ef%bc%89%e3%80%82\/","name":"\u4f7f\u7528GraphQL\u3001Go\u3001React\u548cTypeScript\u5f00\u53d1ToDo\u5e94\u7528\u7a0b\u5e8f\uff08\u524d\u7aef\u90e8\u5206\uff09 - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website"},"datePublished":"2023-03-23T19:53:10+00:00","dateModified":"2024-04-30T10:58:41+00:00","author":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/85c1dae56e6ea1e695c73d33c684d487"},"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%91todo%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%ef%bc%88%e5%89%8d%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%91todo%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%ef%bc%88%e5%89%8d%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%91todo%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%ef%bc%88%e5%89%8d%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\u53d1ToDo\u5e94\u7528\u7a0b\u5e8f\uff08\u524d\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\/85c1dae56e6ea1e695c73d33c684d487","name":"\u9038, \u79d1","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c94f6d9cbbfbca863fab309840bd690c153c95f8490c290ad2ed54dd693dad16?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c94f6d9cbbfbca863fab309840bd690c153c95f8490c290ad2ed54dd693dad16?s=96&d=mm&r=g","caption":"\u9038, \u79d1"},"url":"https:\/\/www.silicloud.com\/zh\/blog\/author\/keyi\/"},{"@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%91todo%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%ef%bc%88%e5%89%8d%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\/38412","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\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/comments?post=38412"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/38412\/revisions"}],"predecessor-version":[{"id":93700,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/38412\/revisions\/93700"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/media?parent=38412"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/categories?post=38412"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/tags?post=38412"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}