{"id":48063,"date":"2023-08-17T10:20:48","date_gmt":"2024-01-22T11:27:46","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%a0%e6%98%af%e5%90%a6%e8%8a%b1%e8%b4%b9%e5%a4%aa%e5%a4%9a%e6%97%b6%e9%97%b4%e8%bf%9b%e8%a1%8c%e5%ba%94%e7%94%a8%e5%bc%80%e5%8f%91%e4%ba%86%ef%bc%9freactamplifyappsynctypescript%e3%80%90\/"},"modified":"2024-04-30T18:55:32","modified_gmt":"2024-04-30T10:55:32","slug":"%e4%bd%a0%e6%98%af%e5%90%a6%e8%8a%b1%e8%b4%b9%e5%a4%aa%e5%a4%9a%e6%97%b6%e9%97%b4%e8%bf%9b%e8%a1%8c%e5%ba%94%e7%94%a8%e5%bc%80%e5%8f%91%e4%ba%86%ef%bc%9freactamplifyappsynctypescript%e3%80%90","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%a0%e6%98%af%e5%90%a6%e8%8a%b1%e8%b4%b9%e5%a4%aa%e5%a4%9a%e6%97%b6%e9%97%b4%e8%bf%9b%e8%a1%8c%e5%ba%94%e7%94%a8%e5%bc%80%e5%8f%91%e4%ba%86%ef%bc%9freactamplifyappsynctypescript%e3%80%90\/","title":{"rendered":"\u4f60\u662f\u5426\u82b1\u8d39\u592a\u591a\u65f6\u95f4\u8fdb\u884c\u5e94\u7528\u5f00\u53d1\u4e86\uff1fReact+Amplify+AppSync+TypeScript\u3010\u5165\u95e8\u5de5\u5177\u5305No.3\u3011\u63a8\u8350\u5feb\u901f\u539f\u578b\u5236\u4f5c"},"content":{"rendered":"

\u8fd9\u7bc7\u6587\u7ae0\u53c2\u8003\u4e86\u4ee5\u4e0b\u6587\u7ae0\u5e76\u8fdb\u884c\u4e86\u6700\u65b0\u7248\u672c\u7684\u66f4\u65b0\u3002
\nhttps:\/\/qiita.com\/G-awa\/items\/a5b2cc7017b1eceeb002
\nhttps:\/\/qiita.com\/otanu\/items\/2c522a652e5843a5e2c5<\/p>\n

\u73b0\u4ee3\u524d\u7aef\u6280\u672f\u7684\u91cd\u8981\u6027<\/h3>\n

\u672c\u6559\u7a0b\u65e8\u5728\u4ecb\u7ecd\u73b0\u4ee3\u524d\u7aef\u6280\u672f\u6982\u8bba\uff08\u6211\u6253\u7b97\u4ee5\u8fde\u8d2f\u7684\u65b9\u5f0f\u6765\u8fdb\u884c\u8bb2\u89e3\uff09\u3002
\n\uff08\u6211\u4e4b\u540e\u8fd8\u6253\u7b97\u597d\u597d\u5199\u4e00\u7bc7\u5173\u4e8e\u6b64\u8bdd\u9898\u7684\u6587\u7ae0\u3002\uff09<\/p>\n

\u5feb\u901f\u539f\u578b\u5236\u4f5c<\/h3>\n

\u4e3a\u4e86\u5c06\u60f3\u6cd5\u8fc5\u901f\u5448\u73b0\u6210\u5f62\uff0c\u9700\u8981\u5177\u5907\u5feb\u901f\u539f\u578b\u8bbe\u8ba1\u7684\u6280\u80fd\u3002\u4e3a\u6b64\uff0c\u9700\u8981\u9ad8\u6548\u7684\u67b6\u6784\u548c\u6a21\u677f\u3002\u672c\u6559\u7a0b\u5c06\u4ecb\u7ecd\u6a21\u677f\u7684\u8bbe\u7f6e\u548c\u90e8\u7f72\u6b65\u9aa4\uff0c\u8bf7\u5c1d\u8bd5\u5c06\u5176\u4f5c\u4e3a\u9ad8\u901f\u539f\u578b\u8bbe\u8ba1\u7684\u57fa\u7840\u4ee3\u7801\u4f7f\u7528\u3002<\/p>\n

\u8fd9\u91cc\u662f GitHub
\nhttps:\/\/github.com\/makotunes\/starter-kit-react-gq-amplify<\/p>\n

\"screencapture-localhost-3000-full-todos-2021-06-04-12_26_22.png\"<\/div>\n

\u6211\u5011\u5c07\u4f7f\u7528\u50c5\u9700\u5e7e\u500b\u547d\u4ee4\u4fbf\u80fd\u5c07\u60f3\u6cd5\u8fc5\u901f\u5be6\u73fe\u7684\u61c9\u7528\u7a0b\u5f0f\u9032\u884c\u90e8\u7f72\u3002<\/p>\n

\u6211\u4f1a\u5b89\u88c5create-react-app\u548camplify\u547d\u4ee4\u3002<\/p>\n

npm i -g<\/span> create-react-app\r\nnpm install<\/span> -g<\/span> @aws-amplify\/cli\r\n<\/code><\/pre>\n
\u5730\u9ede\u662f\u4e2d\u570b\u7684\u4e00\u500b\u57ce\u5e02\u3002<\/p>\n
$ <\/span>create-react-app --version<\/span>\r\n4.0.3\r\n\r\n$ <\/span>node -v<\/span>\r\nv16.1.0\r\n\r\n$ <\/span>npm -v<\/span>\r\n7.11.2\r\n\r\n$ <\/span>amplify --version<\/span>\r\n4.49.0\r\n<\/code><\/pre>\n
\u9996\u5148\uff0c\u6211\u4eec\u5c06\u521b\u5efa\u4e00\u4e2a\u6846\u67b6\u3002<\/p>\n
create-react-app speedy-app-starter-kit  --template<\/span> typescript\r\ncd <\/span>speedy-app-starter-kit\r\n<\/code><\/pre>\n
\u5728AWS\u4e2d\uff0cGraphQL\u7684\u6258\u7ba1\u670d\u52a1\u79f0\u4e3aAppSync\u3002\u800cAmplify\u53ef\u4ee5\u4f5c\u4e3a\u4e00\u4e2aCI\/CD\u670d\u52a1\uff0c\u7528\u4e8e\u8f7b\u677e\u90e8\u7f72\u6258\u7ba1\u670d\u52a1\u3002\u60a8\u53ef\u4ee5\u4f7f\u7528\u4ea4\u4e92\u5f0f\u547d\u4ee4\u6765\u914d\u7f6e\u8bbe\u7f6e\u3002\u6839\u636e\u60a8\u7684\u559c\u597d\u8bbe\u7f6eAWS\u51ed\u636e\u7b49\u3002<\/p>\n
amplify init\r\n\r\n? Enter a name for <\/span>the project (<\/span>speedyappstarterkit)<\/span>\r\n? Initialize the project with the above configuration? (<\/span>Y\/n)<\/span> \r\n? Select the authentication method you want to use: (<\/span>Use arrow keys)<\/span>\r\n? Please choose the profile you want to use (<\/span>Use arrow keys)<\/span>\r\n<\/code><\/pre>\n
\u5728\u8fd9\u4e2a\u9636\u6bb5\uff0camplify\u5c06\u90e8\u7f72\u4e00\u4e2a\u7a7a\u7684\u5e94\u7528\u7a0b\u5e8f\u3002<\/p>\n
\"screencapture-console-aws-amazon-amplify-home-2021-06-03-07_17_16.png\"<\/div>\n
\u5728\u8fd9\u91cc\u8bbe\u7f6eGraphQL\u7684API\u3002<\/p>\n
amplify add api\r\n\r\n? Please select <\/span>from one of the below mentioned services: (<\/span>Use arrow keys)<\/span>\r\n><\/span> GraphQL\r\n\r\n? Provide API name: \r\n><\/span> speedyappstarterkit\r\n\r\n? Choose the default authorization type <\/span>for <\/span>the API (<\/span>Use arrow keys)<\/span>\r\n><\/span> API key\r\n\r\n? Enter a description for <\/span>the API key:\r\n><\/span> test<\/span>\r\n\r\n? After how many days from now the API key should expire (<\/span>1-365)<\/span>:\r\n><\/span> 90\r\n\r\n? Do you want to configure advanced settings for <\/span>the GraphQL API \r\n><\/span> No, I am done<\/span>.<\/span>\r\n\r\n? Do you have an annotated GraphQL schema? No\r\n><\/span> No\r\n\r\n? Choose a schema template: (<\/span>Use arrow keys)<\/span>\r\n><\/span> Single object with fields (<\/span>e.g., \u201cTodo\u201d with ID, name, description)<\/span> \r\n\r\n? Do you want to edit the schema now?\r\n><\/span> No\r\n<\/code><\/pre>\n
\u5c06\u521b\u5efa\u4e00\u4e2a\u5305\u542b\u6570\u636e\u7c7b\u578b\u5b9a\u4e49\u7684GraphQL\u6a21\u5f0f\u6587\u4ef6\u7684\u6587\u4ef6\u3002\u6211\u4eec\u5c06\u76f4\u63a5\u4f7f\u7528\u8fd9\u4e2a\u6587\u4ef6\u3002<\/p>\n
type<\/span> Todo<\/span> @<\/span>model<\/span> {<\/span>\r\n  id<\/span>:<\/span> ID<\/span>!<\/span>\r\n  name<\/span>:<\/span> String<\/span>!<\/span>\r\n  description<\/span>:<\/span> String<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
GraphQL\u6ce8\u518c\u670d\u52a1\u67b6\u6784\u65f6\u9700\u8981\u63d0\u4f9b\u6a21\u5f0f(schema)\uff0c
\n\u4f46\u7528\u6237\u53ea\u9700\u8981\u63d0\u4f9b\u6700\u57fa\u672c\u7684\u4fe1\u606f\u3002<\/p>\n
\u4f7f\u7528amplify\u7684\u547d\u4ee4\u884c\u754c\u9762\uff0c\u6839\u636e\u8fd9\u4e2a\u6570\u636e\u7c7b\u578b\u5b9a\u4e49\uff0c\u81ea\u52a8\u4e3aAppSync\u751f\u6210\u6a21\u5f0f\u5e76\u4e3a\u524d\u7aef\u751f\u6210\u5fc5\u8981\u7684\u57fa\u672c\u67e5\u8be2\u6a21\u5f0f\u3002<\/p>\n
amplify push\r\n\r\n? Are you sure you want to continue<\/span>? (<\/span>Y\/n)<\/span>\r\n><\/span> Y\r\n\r\n? Do you want to generate code for <\/span>your newly created GraphQL API (<\/span>Y\/n)<\/span>\r\n><\/span> Y\r\n\r\n? Choose the code generation language target\r\n><\/span> typescript\r\n\r\n? Enter the file name pattern of graphql queries, mutations and subscriptions (<\/span>src\/graphql\/**<\/span>\/*<\/span>.ts)<\/span> \r\n><\/span> src\/graphql\/**<\/span>\/*<\/span>.ts\r\n\r\n? Do you want to generate\/update all possible GraphQL operations - queries, mutations and subscriptions (<\/span>Y\/n)<\/span>\r\n><\/span> Y\r\n\r\n? Enter maximum statement depth [<\/span>increase from default if <\/span>your schema is deeply nested] (<\/span>2)<\/span> \r\n><\/span> 2\r\n\r\n? Enter the file name for <\/span>the generated code (<\/span>src\/API.ts)<\/span>  \r\n><\/span> src\/API.ts\r\n<\/code><\/pre>\n
\u6211\u4f1a\u5b89\u88c5\u6700\u4f4e\u5fc5\u8981\u7684\u6a21\u5757\u3002<\/p>\n
yarn add aws-amplify\r\n# yarn add aws-amplify-react<\/span>\r\nyarn add react-router-dom\r\nyarn add @types\/react-router-dom \r\n<\/code><\/pre>\n
\u4e3a\u4e86\u8ba9\u5de5\u7a0b\u5e08\u4e5f\u80fd\u5236\u4f5c\u51fa\u65f6\u5c1a\u7684\u8bbe\u8ba1\uff0c\u6211\u4eec\u4f1a\u5f15\u5165Material-UI\u3002<\/p>\n
yarn add @material-ui\/core @material-ui\/icons @material-ui\/data-grid\r\n<\/code><\/pre>\n
import<\/span> React<\/span> from<\/span> \"<\/span>react<\/span>\"<\/span>;<\/span>\r\nimport<\/span> {<\/span> BrowserRouter<\/span> as<\/span> Router<\/span>,<\/span> Route<\/span>,<\/span> Switch<\/span> }<\/span> from<\/span> \"<\/span>react-router-dom<\/span>\"<\/span>;<\/span>\r\n\r\nimport<\/span> SimpleTodoPage<\/span> from<\/span> \"<\/span>.\/components\/pages\/SimpleTodoPage<\/span>\"<\/span>;<\/span>\r\n\r\nconst<\/span> App<\/span>:<\/span> React<\/span>.<\/span>FC<\/span> =<\/span> ()<\/span> =><\/span> {<\/span>\r\n  return<\/span> (<\/span>\r\n    <<\/span>Router<\/span>><\/span>\r\n      <<\/span>Switch<\/span>><\/span>\r\n        <<\/span>Route<\/span> path<\/span>=<\/span>\"<\/span>\/<\/span>\"<\/span> component<\/span>=<\/span>{<\/span>SimpleTodoPage<\/span>}<\/span> exact<\/span> \/><\/span>\r\n      <<\/span>\/Switch<\/span>>\r\n<\/span>    <<\/span>\/Router<\/span>>\r\n<\/span>  );<\/span>\r\n};<\/span>\r\n\r\nexport<\/span> default<\/span> App<\/span>;<\/span>\r\n<\/code><\/pre>\n
import<\/span> React<\/span> from<\/span> '<\/span>react<\/span>'<\/span>;<\/span>\r\nimport<\/span> ReactDOM<\/span> from<\/span> '<\/span>react-dom<\/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> reportWebVitals<\/span> from<\/span> '<\/span>.\/reportWebVitals<\/span>'<\/span>;<\/span>\r\nimport<\/span> Amplify<\/span> from<\/span> \"<\/span>aws-amplify<\/span>\"<\/span>  \/\/ \u8ffd\u52a0<\/span>\r\nimport<\/span> config<\/span> from<\/span> \"<\/span>.\/aws-exports<\/span>\"<\/span> \/\/ \u8ffd\u52a0<\/span>\r\nAmplify<\/span>.<\/span>configure<\/span>(<\/span>config<\/span>)<\/span>          \/\/ \u8ffd\u52a0<\/span>\r\n\r\nReactDOM<\/span>.<\/span>render<\/span>(<\/span>\r\n  <<\/span>React<\/span>.<\/span>StrictMode<\/span>><\/span>\r\n    <<\/span>App<\/span> \/><\/span>\r\n  <<\/span>\/React.StrictMode><\/span>,\r\n<\/span>  document<\/span>.<\/span>getElementById<\/span>(<\/span>'<\/span>root<\/span>'<\/span>)<\/span>\r\n);<\/span>\r\n\r\n\/\/ If you want to start measuring performance in your app, pass a function<\/span>\r\n\/\/ to log results (for example: reportWebVitals(console.log))<\/span>\r\n\/\/ or send to an analytics endpoint. Learn more: https:\/\/bit.ly\/CRA-vitals<\/span>\r\nreportWebVitals<\/span>();<\/span>\r\n\r\n<\/code><\/pre>\n
import<\/span> GenericTemplate<\/span> from<\/span> \"<\/span>..\/templates\/GenericTemplate<\/span>\"<\/span>;<\/span>\r\nimport<\/span> {<\/span> makeStyles<\/span> }<\/span> from<\/span> \"<\/span>@material-ui\/core\/styles<\/span>\"<\/span>;<\/span>\r\nimport<\/span> Table<\/span> from<\/span> \"<\/span>@material-ui\/core\/Table<\/span>\"<\/span>;<\/span>\r\nimport<\/span> TableBody<\/span> from<\/span> \"<\/span>@material-ui\/core\/TableBody<\/span>\"<\/span>;<\/span>\r\nimport<\/span> TableCell<\/span> from<\/span> \"<\/span>@material-ui\/core\/TableCell<\/span>\"<\/span>;<\/span>\r\nimport<\/span> TableContainer<\/span> from<\/span> \"<\/span>@material-ui\/core\/TableContainer<\/span>\"<\/span>;<\/span>\r\nimport<\/span> TableHead<\/span> from<\/span> \"<\/span>@material-ui\/core\/TableHead<\/span>\"<\/span>;<\/span>\r\nimport<\/span> TableRow<\/span> from<\/span> \"<\/span>@material-ui\/core\/TableRow<\/span>\"<\/span>;<\/span>\r\nimport<\/span> Paper<\/span> from<\/span> \"<\/span>@material-ui\/core\/Paper<\/span>\"<\/span>;<\/span>\r\n\r\nimport<\/span> {<\/span> ThemeProvider<\/span> }<\/span> from<\/span> '<\/span>@material-ui\/styles<\/span>'<\/span>;<\/span>\r\nimport<\/span> {<\/span> createMuiTheme<\/span> }<\/span> from<\/span> '<\/span>@material-ui\/core\/styles<\/span>'<\/span>;<\/span>\r\nimport<\/span> Box<\/span> from<\/span> \"<\/span>@material-ui\/core\/Box<\/span>\"<\/span>;<\/span>\r\nimport<\/span> TextField<\/span> from<\/span> \"<\/span>@material-ui\/core\/TextField<\/span>\"<\/span>;<\/span>\r\nimport<\/span> Button<\/span> from<\/span> \"<\/span>@material-ui\/core\/Button<\/span>\"<\/span>;<\/span>\r\n\r\n\r\nimport<\/span> React<\/span>,<\/span> {<\/span> useEffect<\/span>,<\/span> useState<\/span> }<\/span> from<\/span> \"<\/span>react<\/span>\"<\/span>;<\/span>\r\nimport<\/span> {<\/span> API<\/span>,<\/span> graphqlOperation<\/span> }<\/span> from<\/span> \"<\/span>aws-amplify<\/span>\"<\/span>;<\/span>\r\nimport<\/span> {<\/span> listTodos<\/span> }<\/span> from<\/span> \"<\/span>..\/..\/graphql\/queries<\/span>\"<\/span>;<\/span>\r\nimport<\/span> {<\/span> createTodo<\/span> }<\/span> from<\/span> \"<\/span>..\/..\/graphql\/mutations<\/span>\"<\/span>;<\/span>\r\nimport<\/span> {<\/span> onCreateTodo<\/span> }<\/span> from<\/span> \"<\/span>..\/..\/graphql\/subscriptions<\/span>\"<\/span>;<\/span>\r\nimport<\/span> {<\/span>\r\n    ListTodosQuery<\/span>,<\/span>\r\n    OnCreateTodoSubscription<\/span>,<\/span>\r\n    CreateTodoMutationVariables<\/span>\r\n}<\/span> from<\/span> \"<\/span>..\/..\/API<\/span>\"<\/span>;<\/span>\r\n\r\nconst<\/span> theme<\/span> =<\/span> createMuiTheme<\/span>({<\/span>\r\n    palette<\/span>:<\/span> {<\/span>\r\n        primary<\/span>:<\/span> {<\/span> main<\/span>:<\/span> '<\/span>#00838f<\/span>'<\/span> },<\/span>\r\n        secondary<\/span>:<\/span> {<\/span> main<\/span>:<\/span> '<\/span>#e0f7fa<\/span>'<\/span> },<\/span>\r\n    },<\/span>\r\n});<\/span>\r\n\r\ntype<\/span> Todo<\/span> =<\/span> {<\/span>\r\n    id<\/span>:<\/span> string<\/span>;<\/span>\r\n    name<\/span>:<\/span> string<\/span>;<\/span>\r\n    description<\/span>?:<\/span> string<\/span> |<\/span> null<\/span> |<\/span> undefined<\/span>;<\/span>\r\n    createdAt<\/span>:<\/span> string<\/span>;<\/span>\r\n    updatedAt<\/span>:<\/span> string<\/span>;<\/span>\r\n};<\/span>\r\n\r\ntype<\/span> FormState<\/span> =<\/span> {<\/span>\r\n    name<\/span>:<\/span> string<\/span>;<\/span>\r\n    description<\/span>:<\/span> string<\/span>;<\/span>\r\n};<\/span>\r\n\r\ntype<\/span> TodoSubscriptionEvent<\/span> =<\/span> {<\/span> value<\/span>:<\/span> {<\/span> data<\/span>:<\/span> OnCreateTodoSubscription<\/span> }<\/span> };<\/span>\r\n\r\nconst<\/span> useTodos<\/span> =<\/span> ()<\/span> =><\/span> {<\/span>\r\n    const<\/span> [<\/span>todos<\/span>,<\/span> setTodos<\/span>]<\/span> =<\/span> useState<\/span><<\/span>Todo<\/span>[]<\/span>><\/span>([]);<\/span>\r\n\r\n    useEffect<\/span>(()<\/span> =><\/span> {<\/span>\r\n        (<\/span>async<\/span> ()<\/span> =><\/span> {<\/span>\r\n            \/\/ \u6700\u521d\u306eTodo\u4e00\u89a7\u53d6\u5f97<\/span>\r\n            const<\/span> result<\/span> =<\/span> await<\/span> API<\/span>.<\/span>graphql<\/span>(<\/span>graphqlOperation<\/span>(<\/span>listTodos<\/span>));<\/span>\r\n            if<\/span> (<\/span>\"<\/span>data<\/span>\"<\/span> in<\/span> result<\/span> &&<\/span> result<\/span>.<\/span>data<\/span>)<\/span> {<\/span>\r\n                const<\/span> todos<\/span> =<\/span> result<\/span>.<\/span>data<\/span> as<\/span> ListTodosQuery<\/span>;<\/span>\r\n                if<\/span> (<\/span>todos<\/span>.<\/span>listTodos<\/span>)<\/span> {<\/span>\r\n                    setTodos<\/span>(<\/span>todos<\/span>.<\/span>listTodos<\/span>.<\/span>items<\/span> as<\/span> Todo<\/span>[]);<\/span>\r\n                }<\/span>\r\n            }<\/span>\r\n\r\n            \/\/ Todo\u8ffd\u52a0\u30a4\u30d9\u30f3\u30c8\u306e\u8cfc\u8aad<\/span>\r\n            const<\/span> client<\/span> =<\/span> API<\/span>.<\/span>graphql<\/span>(<\/span>graphqlOperation<\/span>(<\/span>onCreateTodo<\/span>));<\/span>\r\n            if<\/span> (<\/span>\"<\/span>subscribe<\/span>\"<\/span> in<\/span> client<\/span>)<\/span> {<\/span>\r\n                client<\/span>.<\/span>subscribe<\/span>({<\/span>\r\n                    next<\/span>:<\/span> ({<\/span> value<\/span>:<\/span> {<\/span> data<\/span> }<\/span> }:<\/span> TodoSubscriptionEvent<\/span>)<\/span> =><\/span> {<\/span>\r\n                        if<\/span> (<\/span>data<\/span>.<\/span>onCreateTodo<\/span>)<\/span> {<\/span>\r\n                            const<\/span> todo<\/span>:<\/span> Todo<\/span> =<\/span> data<\/span>.<\/span>onCreateTodo<\/span>;<\/span>\r\n                            setTodos<\/span>(<\/span>prev<\/span> =><\/span> [...<\/span>prev<\/span>,<\/span> todo<\/span>]);<\/span>\r\n                        }<\/span>\r\n                    }<\/span>\r\n                });<\/span>\r\n            }<\/span>\r\n        })();<\/span>\r\n    },<\/span> []);<\/span>\r\n\r\n    return<\/span> todos<\/span>;<\/span>\r\n};<\/span>\r\n\r\n\r\nconst<\/span> useStyles<\/span> =<\/span> makeStyles<\/span>({<\/span>\r\n    table<\/span>:<\/span> {<\/span>\r\n        minWidth<\/span>:<\/span> 650<\/span>,<\/span>\r\n    },<\/span>\r\n});<\/span>\r\n\r\nconst<\/span> ProductPage<\/span>:<\/span> React<\/span>.<\/span>FC<\/span> =<\/span> ()<\/span> =><\/span> {<\/span>\r\n    const<\/span> classes<\/span> =<\/span> useStyles<\/span>();<\/span>\r\n    const<\/span> [<\/span>input<\/span>,<\/span> setInput<\/span>]<\/span> =<\/span> useState<\/span><<\/span>FormState<\/span>><\/span>({<\/span>\r\n        name<\/span>:<\/span> \"\"<\/span>,<\/span>\r\n        description<\/span>:<\/span> \"\"<\/span>\r\n    });<\/span>\r\n    const<\/span> todos<\/span> =<\/span> useTodos<\/span>();<\/span>\r\n\r\n    const<\/span> onFormChange<\/span> =<\/span> ({<\/span>\r\n        target<\/span>:<\/span> {<\/span> name<\/span>,<\/span> value<\/span> }<\/span>\r\n    }:<\/span> React<\/span>.<\/span>ChangeEvent<\/span><<\/span>HTMLInputElement<\/span>><\/span>)<\/span> =><\/span> {<\/span>\r\n        setInput<\/span>(<\/span>prev<\/span> =><\/span> ({<\/span> ...<\/span>prev<\/span>,<\/span> [<\/span>name<\/span>]:<\/span> value<\/span> }));<\/span>\r\n    };<\/span>\r\n\r\n    const<\/span> onTodo<\/span> =<\/span> ()<\/span> =><\/span> {<\/span>\r\n        if<\/span> (<\/span>input<\/span>.<\/span>name<\/span> ===<\/span> \"\"<\/span> ||<\/span> input<\/span>.<\/span>description<\/span> ===<\/span> \"\"<\/span>)<\/span> return<\/span>;<\/span>\r\n        const<\/span> newTodo<\/span>:<\/span> CreateTodoMutationVariables<\/span> =<\/span> {<\/span>\r\n            input<\/span>:<\/span> {<\/span>\r\n                name<\/span>:<\/span> input<\/span>.<\/span>name<\/span>,<\/span>\r\n                description<\/span>:<\/span> input<\/span>.<\/span>description<\/span>\r\n            }<\/span>\r\n        };<\/span>\r\n        setInput<\/span>({<\/span> name<\/span>:<\/span> \"\"<\/span>,<\/span> description<\/span>:<\/span> \"\"<\/span> });<\/span>\r\n        API<\/span>.<\/span>graphql<\/span>(<\/span>graphqlOperation<\/span>(<\/span>createTodo<\/span>,<\/span> newTodo<\/span>));<\/span>\r\n    };<\/span>\r\n\r\n    return<\/span> (<\/span>\r\n        <<\/span>GenericTemplate<\/span> title<\/span>=<\/span>\"<\/span>TODO\u7c21\u6613\u7248<\/span>\"<\/span>><\/span>\r\n            <<\/span>ThemeProvider<\/span> theme<\/span>=<\/span>{<\/span>theme<\/span>}<\/span>><\/span>\r\n                <<\/span>Box<\/span> p<\/span>=<\/span>{<\/span>2<\/span>}<\/span> bgcolor<\/span>=<\/span>\"<\/span>primary.main<\/span>\"<\/span> color<\/span>=<\/span>\"<\/span>primary.contrastText<\/span>\"<\/span>><\/span>\r\n                    \u65b0\u898f\u767b\u9332<\/span>\r\n        \u3000<\/span>      <<\/span>\/Box<\/span>>\r\n<\/span>\r\n                <<\/span>Box<\/span> p<\/span>=<\/span>{<\/span>2<\/span>}<\/span> bgcolor<\/span>=<\/span>\"<\/span>secondary.main<\/span>\"<\/span> color<\/span>=<\/span>\"<\/span>primary.main<\/span>\"<\/span>><\/span>\r\n                    <<\/span>form<\/span> action<\/span>=<\/span>\"<\/span>\/users<\/span>\"<\/span> acceptCharset<\/span>=<\/span>\"<\/span>UTF-8<\/span>\"<\/span> method<\/span>=<\/span>\"<\/span>post<\/span>\"<\/span>><\/span>\r\n                        <<\/span>div<\/span>><<\/span>TextField<\/span> id<\/span>=<\/span>\"<\/span>name<\/span>\"<\/span> type<\/span>=<\/span>\"<\/span>text<\/span>\"<\/span> name<\/span>=<\/span>\"<\/span>name<\/span>\"<\/span> label<\/span>=<\/span>\"<\/span>\u540d\u524d<\/span>\"<\/span> style<\/span>=<\/span>{{<\/span> width<\/span>:<\/span> 500<\/span> }}<\/span> value<\/span>=<\/span>{<\/span>input<\/span>.<\/span>name<\/span>}<\/span> onChange<\/span>=<\/span>{<\/span>onFormChange<\/span>}<\/span> \/><\/<\/span>div<\/span>><\/span>\r\n                        <<\/span>div<\/span>><<\/span>TextField<\/span> id<\/span>=<\/span>\"<\/span>description<\/span>\"<\/span> type<\/span>=<\/span>\"<\/span>text<\/span>\"<\/span> name<\/span>=<\/span>\"<\/span>description<\/span>\"<\/span> label<\/span>=<\/span>\"<\/span>\u8a73\u7d30<\/span>\"<\/span> style<\/span>=<\/span>{{<\/span> width<\/span>:<\/span> 500<\/span> }}<\/span> value<\/span>=<\/span>{<\/span>input<\/span>.<\/span>description<\/span>}<\/span> onChange<\/span>=<\/span>{<\/span>onFormChange<\/span>}<\/span> \/><\/<\/span>div<\/span>><\/span>\r\n                        <<\/span>Button<\/span> variant<\/span>=<\/span>\"<\/span>contained<\/span>\"<\/span> color<\/span>=<\/span>\"<\/span>primary<\/span>\"<\/span> name<\/span>=<\/span>\"<\/span>commit<\/span>\"<\/span> onClick<\/span>=<\/span>{<\/span>onTodo<\/span>}<\/span>><\/span>\u767b\u9332<\/span><<\/span>\/Button<\/span>>\r\n<\/span>                    <<\/span>\/form<\/span>>\r\n<\/span>                <<\/span>\/Box<\/span>>\r\n<\/span>            <<\/span>\/ThemeProvider<\/span>>\r\n<\/span>            <<\/span>TableContainer<\/span> component<\/span>=<\/span>{<\/span>Paper<\/span>}<\/span>><\/span>\r\n                <<\/span>Table<\/span> className<\/span>=<\/span>{<\/span>classes<\/span>.<\/span>table<\/span>}<\/span> aria<\/span>-<\/span>label<\/span>=<\/span>\"<\/span>simple table<\/span>\"<\/span>><\/span>\r\n                    <<\/span>TableHead<\/span>><\/span>\r\n                        <<\/span>TableRow<\/span>><\/span>\r\n                            <<\/span>TableCell<\/span>><\/span>\u540d\u524d<\/span><<\/span>\/TableCell<\/span>>\r\n<\/span>                            <<\/span>TableCell<\/span>><\/span>\u8a73\u7d30<\/span><<\/span>\/TableCell<\/span>>\r\n<\/span>\r\n                        <<\/span>\/TableRow<\/span>>\r\n<\/span>                    <<\/span>\/TableHead<\/span>>\r\n<\/span>                    <<\/span>TableBody<\/span>><\/span>\r\n                        {<\/span>todos<\/span>.<\/span>map<\/span>((<\/span>row<\/span>)<\/span> =><\/span> (<\/span>\r\n                            <<\/span>TableRow<\/span> key<\/span>=<\/span>{<\/span>row<\/span>.<\/span>id<\/span>}<\/span>><\/span>\r\n                                <<\/span>TableCell<\/span> component<\/span>=<\/span>\"<\/span>th<\/span>\"<\/span> scope<\/span>=<\/span>\"<\/span>row<\/span>\"<\/span>><\/span>\r\n                                    {<\/span>row<\/span>.<\/span>name<\/span>}<\/span>\r\n                                <<\/span>\/TableCell<\/span>>\r\n<\/span>                                <<\/span>TableCell<\/span>><\/span>{<\/span>row<\/span>.<\/span>description<\/span>}<\/span><<\/span>\/TableCell<\/span>>\r\n<\/span>\r\n                            <<\/span>\/TableRow<\/span>>\r\n<\/span>                        ))}<\/span>\r\n                    <<\/span>\/TableBody<\/span>>\r\n<\/span>                <<\/span>\/Table<\/span>>\r\n<\/span>            <<\/span>\/TableContainer<\/span>>\r\n<\/span>        <<\/span>\/GenericTemplate<\/span>>\r\n<\/span>    );<\/span>\r\n};<\/span>\r\n\r\nexport<\/span> default<\/span> ProductPage<\/span>;<\/span>\r\n<\/code><\/pre>\n
\u53ea\u8981\u6ca1\u6709\u7aef\u53e3\u51b2\u7a81\uff0c\u8fd0\u884cWeb\u670d\u52a1\u5e76\u786e\u8ba4\u64cd\u4f5c\u3002\u53ef\u4ee5\u901a\u8fc7http:\/\/localhost:3000\/\u8bbf\u95ee\u3002<\/p>\n
yarn start\r\n<\/code><\/pre>\n
\u8fd9\u6b21\u6211\u4eec\u63d0\u4f9b\u4e86\u7b80\u6613\u7248\u7684\u4ee3\u7801\uff0c
\n\u5b8c\u6574\u7248\u4e5f\u53ef\u4ee5\u5728Github\u4e0a\u4f7f\u7528\u3002
\nhttps:\/\/github.com\/makotunes\/starter-kit-react-gq-amplify<\/p>\n
\u5728\u5b8c\u6574\u7248\u4e2d\uff0c\u9664\u4e86\u6d4f\u89c8\u6dfb\u52a0\u4e4b\u5916\uff0c\u8fd8\u652f\u6301\u5220\u9664\u548c\u4fee\u6539\u64cd\u4f5c\u3002<\/p>\n
\u6211\u4e5f\u51c6\u5907\u4e86\u6709\u5173\u524d\u7aef\u5f00\u53d1\u6982\u8ff0\u7684\u5e7b\u706f\u7247\u3002\u4f60\u53ef\u4ee5\u5728\u8fd9\u91cc\u627e\u5230\uff1ahttps:\/\/speakerdeck.com\/makotunes\/modanhurontoendoji-shu-gai-lun<\/p>\n","protected":false},"excerpt":{"rendered":"
\u8fd9\u7bc7\u6587\u7ae0\u53c2\u8003\u4e86\u4ee5\u4e0b\u6587\u7ae0\u5e76\u8fdb\u884c\u4e86\u6700\u65b0\u7248\u672c\u7684\u66f4\u65b0\u3002 https:\/\/qiita.com\/G-awa\/items\/a […]<\/p>\n","protected":false},"author":10,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-48063","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"\n\u4f60\u662f\u5426\u82b1\u8d39\u592a\u591a\u65f6\u95f4\u8fdb\u884c\u5e94\u7528\u5f00\u53d1\u4e86\uff1fReact+Amplify+AppSync+TypeScript\u3010\u5165\u95e8\u5de5\u5177\u5305No.3\u3011\u63a8\u8350\u5feb\u901f\u539f\u578b\u5236\u4f5c - 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\/\u4f60\u662f\u5426\u82b1\u8d39\u592a\u591a\u65f6\u95f4\u8fdb\u884c\u5e94\u7528\u5f00\u53d1\u4e86\uff1freactamplifyappsynctypescript\u3010\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u4f60\u662f\u5426\u82b1\u8d39\u592a\u591a\u65f6\u95f4\u8fdb\u884c\u5e94\u7528\u5f00\u53d1\u4e86\uff1fReact+Amplify+AppSync+TypeScript\u3010\u5165\u95e8\u5de5\u5177\u5305No.3\u3011\u63a8\u8350\u5feb\u901f\u539f\u578b\u5236\u4f5c\" \/>\n<meta property=\"og:description\" content=\"\u8fd9\u7bc7\u6587\u7ae0\u53c2\u8003\u4e86\u4ee5\u4e0b\u6587\u7ae0\u5e76\u8fdb\u884c\u4e86\u6700\u65b0\u7248\u672c\u7684\u66f4\u65b0\u3002 https:\/\/qiita.com\/G-awa\/items\/a […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/zh\/blog\/\u4f60\u662f\u5426\u82b1\u8d39\u592a\u591a\u65f6\u95f4\u8fdb\u884c\u5e94\u7528\u5f00\u53d1\u4e86\uff1freactamplifyappsynctypescript\u3010\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-22T11:27:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-30T10:55:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d8321913a08637a6b2ba4\/7-0.png\" \/>\n<meta name=\"author\" content=\"\u5b87, \u534e\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u5b87, \u534e\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 \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%a0%e6%98%af%e5%90%a6%e8%8a%b1%e8%b4%b9%e5%a4%aa%e5%a4%9a%e6%97%b6%e9%97%b4%e8%bf%9b%e8%a1%8c%e5%ba%94%e7%94%a8%e5%bc%80%e5%8f%91%e4%ba%86%ef%bc%9freactamplifyappsynctypescript%e3%80%90\/\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%a0%e6%98%af%e5%90%a6%e8%8a%b1%e8%b4%b9%e5%a4%aa%e5%a4%9a%e6%97%b6%e9%97%b4%e8%bf%9b%e8%a1%8c%e5%ba%94%e7%94%a8%e5%bc%80%e5%8f%91%e4%ba%86%ef%bc%9freactamplifyappsynctypescript%e3%80%90\/\",\"name\":\"\u4f60\u662f\u5426\u82b1\u8d39\u592a\u591a\u65f6\u95f4\u8fdb\u884c\u5e94\u7528\u5f00\u53d1\u4e86\uff1fReact+Amplify+AppSync+TypeScript\u3010\u5165\u95e8\u5de5\u5177\u5305No.3\u3011\u63a8\u8350\u5feb\u901f\u539f\u578b\u5236\u4f5c - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\"},\"datePublished\":\"2024-01-22T11:27:46+00:00\",\"dateModified\":\"2024-04-30T10:55:32+00:00\",\"author\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/513018e4e121d3add1b7c5de8be21458\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%a0%e6%98%af%e5%90%a6%e8%8a%b1%e8%b4%b9%e5%a4%aa%e5%a4%9a%e6%97%b6%e9%97%b4%e8%bf%9b%e8%a1%8c%e5%ba%94%e7%94%a8%e5%bc%80%e5%8f%91%e4%ba%86%ef%bc%9freactamplifyappsynctypescript%e3%80%90\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%a0%e6%98%af%e5%90%a6%e8%8a%b1%e8%b4%b9%e5%a4%aa%e5%a4%9a%e6%97%b6%e9%97%b4%e8%bf%9b%e8%a1%8c%e5%ba%94%e7%94%a8%e5%bc%80%e5%8f%91%e4%ba%86%ef%bc%9freactamplifyappsynctypescript%e3%80%90\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%a0%e6%98%af%e5%90%a6%e8%8a%b1%e8%b4%b9%e5%a4%aa%e5%a4%9a%e6%97%b6%e9%97%b4%e8%bf%9b%e8%a1%8c%e5%ba%94%e7%94%a8%e5%bc%80%e5%8f%91%e4%ba%86%ef%bc%9freactamplifyappsynctypescript%e3%80%90\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.silicloud.com\/zh\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u4f60\u662f\u5426\u82b1\u8d39\u592a\u591a\u65f6\u95f4\u8fdb\u884c\u5e94\u7528\u5f00\u53d1\u4e86\uff1fReact+Amplify+AppSync+TypeScript\u3010\u5165\u95e8\u5de5\u5177\u5305No.3\u3011\u63a8\u8350\u5feb\u901f\u539f\u578b\u5236\u4f5c\"}]},{\"@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\/513018e4e121d3add1b7c5de8be21458\",\"name\":\"\u5b87, \u534e\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/63cd45cbc05a35fc4ff7637a163c83c4962ef58d27472726c3a3e0c9c5194f0f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/63cd45cbc05a35fc4ff7637a163c83c4962ef58d27472726c3a3e0c9c5194f0f?s=96&d=mm&r=g\",\"caption\":\"\u5b87, \u534e\"},\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/author\/yuhua\/\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%a0%e6%98%af%e5%90%a6%e8%8a%b1%e8%b4%b9%e5%a4%aa%e5%a4%9a%e6%97%b6%e9%97%b4%e8%bf%9b%e8%a1%8c%e5%ba%94%e7%94%a8%e5%bc%80%e5%8f%91%e4%ba%86%ef%bc%9freactamplifyappsynctypescript%e3%80%90\/#local-main-organization-logo\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Blog - Silicon Cloud\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u4f60\u662f\u5426\u82b1\u8d39\u592a\u591a\u65f6\u95f4\u8fdb\u884c\u5e94\u7528\u5f00\u53d1\u4e86\uff1fReact+Amplify+AppSync+TypeScript\u3010\u5165\u95e8\u5de5\u5177\u5305No.3\u3011\u63a8\u8350\u5feb\u901f\u539f\u578b\u5236\u4f5c - 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\/\u4f60\u662f\u5426\u82b1\u8d39\u592a\u591a\u65f6\u95f4\u8fdb\u884c\u5e94\u7528\u5f00\u53d1\u4e86\uff1freactamplifyappsynctypescript\u3010\/","og_locale":"zh_CN","og_type":"article","og_title":"\u4f60\u662f\u5426\u82b1\u8d39\u592a\u591a\u65f6\u95f4\u8fdb\u884c\u5e94\u7528\u5f00\u53d1\u4e86\uff1fReact+Amplify+AppSync+TypeScript\u3010\u5165\u95e8\u5de5\u5177\u5305No.3\u3011\u63a8\u8350\u5feb\u901f\u539f\u578b\u5236\u4f5c","og_description":"\u8fd9\u7bc7\u6587\u7ae0\u53c2\u8003\u4e86\u4ee5\u4e0b\u6587\u7ae0\u5e76\u8fdb\u884c\u4e86\u6700\u65b0\u7248\u672c\u7684\u66f4\u65b0\u3002 https:\/\/qiita.com\/G-awa\/items\/a […]","og_url":"https:\/\/www.silicloud.com\/zh\/blog\/\u4f60\u662f\u5426\u82b1\u8d39\u592a\u591a\u65f6\u95f4\u8fdb\u884c\u5e94\u7528\u5f00\u53d1\u4e86\uff1freactamplifyappsynctypescript\u3010\/","og_site_name":"Blog - Silicon Cloud","article_published_time":"2024-01-22T11:27:46+00:00","article_modified_time":"2024-04-30T10:55:32+00:00","og_image":[{"url":"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d8321913a08637a6b2ba4\/7-0.png"}],"author":"\u5b87, \u534e","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"\u5b87, \u534e","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"5 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%a0%e6%98%af%e5%90%a6%e8%8a%b1%e8%b4%b9%e5%a4%aa%e5%a4%9a%e6%97%b6%e9%97%b4%e8%bf%9b%e8%a1%8c%e5%ba%94%e7%94%a8%e5%bc%80%e5%8f%91%e4%ba%86%ef%bc%9freactamplifyappsynctypescript%e3%80%90\/","url":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%a0%e6%98%af%e5%90%a6%e8%8a%b1%e8%b4%b9%e5%a4%aa%e5%a4%9a%e6%97%b6%e9%97%b4%e8%bf%9b%e8%a1%8c%e5%ba%94%e7%94%a8%e5%bc%80%e5%8f%91%e4%ba%86%ef%bc%9freactamplifyappsynctypescript%e3%80%90\/","name":"\u4f60\u662f\u5426\u82b1\u8d39\u592a\u591a\u65f6\u95f4\u8fdb\u884c\u5e94\u7528\u5f00\u53d1\u4e86\uff1fReact+Amplify+AppSync+TypeScript\u3010\u5165\u95e8\u5de5\u5177\u5305No.3\u3011\u63a8\u8350\u5feb\u901f\u539f\u578b\u5236\u4f5c - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website"},"datePublished":"2024-01-22T11:27:46+00:00","dateModified":"2024-04-30T10:55:32+00:00","author":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/513018e4e121d3add1b7c5de8be21458"},"breadcrumb":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%a0%e6%98%af%e5%90%a6%e8%8a%b1%e8%b4%b9%e5%a4%aa%e5%a4%9a%e6%97%b6%e9%97%b4%e8%bf%9b%e8%a1%8c%e5%ba%94%e7%94%a8%e5%bc%80%e5%8f%91%e4%ba%86%ef%bc%9freactamplifyappsynctypescript%e3%80%90\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%a0%e6%98%af%e5%90%a6%e8%8a%b1%e8%b4%b9%e5%a4%aa%e5%a4%9a%e6%97%b6%e9%97%b4%e8%bf%9b%e8%a1%8c%e5%ba%94%e7%94%a8%e5%bc%80%e5%8f%91%e4%ba%86%ef%bc%9freactamplifyappsynctypescript%e3%80%90\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%a0%e6%98%af%e5%90%a6%e8%8a%b1%e8%b4%b9%e5%a4%aa%e5%a4%9a%e6%97%b6%e9%97%b4%e8%bf%9b%e8%a1%8c%e5%ba%94%e7%94%a8%e5%bc%80%e5%8f%91%e4%ba%86%ef%bc%9freactamplifyappsynctypescript%e3%80%90\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.silicloud.com\/zh\/blog\/"},{"@type":"ListItem","position":2,"name":"\u4f60\u662f\u5426\u82b1\u8d39\u592a\u591a\u65f6\u95f4\u8fdb\u884c\u5e94\u7528\u5f00\u53d1\u4e86\uff1fReact+Amplify+AppSync+TypeScript\u3010\u5165\u95e8\u5de5\u5177\u5305No.3\u3011\u63a8\u8350\u5feb\u901f\u539f\u578b\u5236\u4f5c"}]},{"@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\/513018e4e121d3add1b7c5de8be21458","name":"\u5b87, \u534e","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/63cd45cbc05a35fc4ff7637a163c83c4962ef58d27472726c3a3e0c9c5194f0f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/63cd45cbc05a35fc4ff7637a163c83c4962ef58d27472726c3a3e0c9c5194f0f?s=96&d=mm&r=g","caption":"\u5b87, \u534e"},"url":"https:\/\/www.silicloud.com\/zh\/blog\/author\/yuhua\/"},{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%a0%e6%98%af%e5%90%a6%e8%8a%b1%e8%b4%b9%e5%a4%aa%e5%a4%9a%e6%97%b6%e9%97%b4%e8%bf%9b%e8%a1%8c%e5%ba%94%e7%94%a8%e5%bc%80%e5%8f%91%e4%ba%86%ef%bc%9freactamplifyappsynctypescript%e3%80%90\/#local-main-organization-logo","url":"","contentUrl":"","caption":"Blog - Silicon Cloud"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/48063","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\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/comments?post=48063"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/48063\/revisions"}],"predecessor-version":[{"id":93685,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/48063\/revisions\/93685"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/media?parent=48063"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/categories?post=48063"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/tags?post=48063"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}