{"id":48102,"date":"2023-04-28T13:08:47","date_gmt":"2023-01-24T09:35:59","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8amplify-appsync-react-typescript%e8%bf%9b%e8%a1%8c%e7%ae%80%e5%8d%95%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e7%9a%84%e5%88%9b%e5%bb%ba%e2%91%a0\/"},"modified":"2024-04-30T01:42:11","modified_gmt":"2024-04-29T17:42:11","slug":"%e4%bd%bf%e7%94%a8amplify-appsync-react-typescript%e8%bf%9b%e8%a1%8c%e7%ae%80%e5%8d%95%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e7%9a%84%e5%88%9b%e5%bb%ba%e2%91%a0","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8amplify-appsync-react-typescript%e8%bf%9b%e8%a1%8c%e7%ae%80%e5%8d%95%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e7%9a%84%e5%88%9b%e5%bb%ba%e2%91%a0\/","title":{"rendered":"\u4f7f\u7528Amplify + AppSync + React + Typescript\u8fdb\u884c\u7b80\u5355\u5e94\u7528\u7a0b\u5e8f\u7684\u521b\u5efa\u2460"},"content":{"rendered":"<h1>\u6982\u8ff0<\/h1>\n<p>\u4f7f\u7528\u8fc7Amplify\u548cReact\u7684\u4eba\u53ef\u80fd\u65e9\u5c31\u542c\u8bf4\u8fc7\uff0c\u4f46\u662f\u6211\u4e00\u76f4\u6ca1\u6709\u4f7f\u7528\u3002\u8fd9\u7bc7\u6587\u7ae0\u7684\u76ee\u6807\u662f\u4f7f\u7528\u5b83\u4eec\u6765\u521b\u5efa\u4e00\u4e2a\u7b80\u5355\u7684\u5e94\u7528\u7a0b\u5e8f\u3002<\/p>\n<h2>\u4e8b\u524d\u68c0\u67e5<\/h2>\n<p>\u8ba9\u6211\u4eec\u68c0\u67e5\u5404\u79cd\u73af\u5883\u7684\u7248\u672c\u3002\uff08\u5047\u8bbe\u8fd9\u4e9b\u73af\u5883\u90fd\u5b89\u88c5\u6b63\u786e\uff09<\/p>\n<pre class=\"post-pre\"><code><span class=\"nv\">$ <\/span>create-react-app <span class=\"nt\">--version<\/span>\r\n3.4.1\r\n<span class=\"nv\">$ <\/span>node <span class=\"nt\">-v<\/span>\r\nv12.18.0\r\n<span class=\"nv\">$ <\/span>npm <span class=\"nt\">-v<\/span>\r\n6.14.4\r\n<span class=\"nv\">$ <\/span>amplify <span class=\"nt\">--version<\/span>\r\n4.27.1\r\n<\/code><\/pre>\n<h2>\u521b\u5efa\u4e00\u4e2aReact App<\/h2>\n<p>\u6211\u5c06\u5f00\u59cb\u521b\u5efa\u5ba2\u6237\u7aef\u5e94\u7528\u7a0b\u5e8f\u7684\u6a21\u677f\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"nv\">$ <\/span>create-react-app client-app <span class=\"nt\">--template<\/span> typescript\r\n<span class=\"nv\">$ <\/span><span class=\"nb\">cd <\/span>client-app\r\n<span class=\"nv\">$ <\/span>yarn start\r\n<\/code><\/pre>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d8349913a08637a6b31a7\/8-0.png\" alt=\"app-page.cfe4dfdb.png\" \/><\/div>\n<h2>\u521b\u5efaAmplify\u9879\u76ee Amplify<\/h2>\n<p>\u8ba9\u6211\u4eec\u4f7f\u7528AmplifyCLI\u5728AWS\u4e0a\u521b\u5efa\u540e\u7aef(AppSync)\u3002<br \/>\n\u9996\u5148\uff0c\u6211\u4eec\u5c06\u521b\u5efaAmplify\u9879\u76ee\u3002<br \/>\n\u203b \u5047\u8bbe\u60a8\u5df2\u7ecf\u9884\u5148\u521b\u5efa\u4e86AWS\u914d\u7f6e\u6587\u4ef6\u3002<\/p>\n<pre class=\"post-pre\"><code>$ applify init\r\nNote: It is recommended to run this command from the root of your app directory\r\n? Enter a name for the project backend-app\r\n? Enter a name for the environment dev\r\n? Choose your default editor: Visual Studio Code\r\n? Choose the type of app that you're building javascript\r\nPlease tell us about your project\r\n? What javascript framework are you using react\r\n? Source Directory Path:  src\r\n? Distribution Directory Path: build\r\n? Build Command:  npm run-script build\r\n? Start Command: npm run-script start\r\nUsing default provider  awscloudformation\r\n\r\n\r\nFor more information on AWS Profiles, see:\r\nhttps:\/\/docs.aws.amazon.com\/cli\/latest\/userguide\/cli-multiple-profiles.html\r\n\r\n? Do you want to use an AWS profile? Yes\r\n? Please choose the profile you want to use default\r\n<\/code><\/pre>\n<p>\u5728\u521b\u5efaAmplify\u9879\u76ee\u65f6\uff0c\u6211\u4eec\u4f1a\u4e0e\u60a8\u4e92\u52a8\u83b7\u53d6\u8bbe\u7f6e\u4fe1\u606f\uff0c\u5e76\u8fdb\u884c\u9010\u6b65\u56de\u7b54\u3002<br \/>\n\u9009\u62e9\u6700\u540e\u8981\u4f7f\u7528\u7684\u914d\u7f6e\u6587\u4ef6\u540e\uff0c\u5c06\u542f\u52a8Cloudformation\u7684\u90e8\u7f72\u3002<\/p>\n<p>\u90e8\u7f72\u7684\u5185\u5bb9\u5305\u62ec\u521b\u5efaS3\u5b58\u50a8\u6876\u548c\u5404\u79cd\u89d2\u8272\u3002\u5b8c\u6210amplify init\u540e\uff0c\u5efa\u8bae\u5728AWS\u63a7\u5236\u53f0\u4e0a\u8fdb\u884c\u786e\u8ba4\u3002<\/p>\n<h2>\u5728Aplify\u4e0a\u521b\u5efaAPI<\/h2>\n<p>\u521b\u5efaAPI\u4e0e\u521d\u59cb\u5316\u76f8\u540c\uff0c\u5b83\u4f1a\u4ee5\u4e92\u52a8\u65b9\u5f0f\u8be2\u95ee\u914d\u7f6e\u4fe1\u606f\uff0c\u7136\u540e\u9010\u6b65\u56de\u7b54\u3002<\/p>\n<pre class=\"post-pre\"><code>$ amplify add api\r\n? Please select from one of the below mentioned services: GraphQL\r\n? Provide API name: AmplifyFunction\r\n? Choose the default authorization type for the API API key\r\n? Enter a description for the API key:\r\n? After how many days from now the API key should expire (1-365): 365\r\n? Do you want to configure advanced settings for the GraphQL API No, I am done.\r\n? Do you have an annotated GraphQL schema? No\r\n? Choose a schema template: Single object with fields (e.g., \u201cTodo\u201d with ID, name, description)\r\nGraphQL schema compiled successfully.\r\n? Do you want to edit the schema now? No\r\nSuccessfully added resource\r\n\r\nSome next steps:\r\n\"amplify push\" will build all your local backend resources and provision it in the cloud\r\n\"amplify publish\" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud\r\n<\/code><\/pre>\n<p>\u6211\u4eec\u6765\u68c0\u67e5\u4e00\u4e0b\uff0c\u5b8c\u6210\u540e\u5728amplify\u76ee\u5f55\u4e2d\u662f\u5426\u521b\u5efa\u4e86\u6a21\u5f0f\u7684\u6a21\u578b\u5b9a\u4e49\u3002<\/p>\n<p>\u8fd9\u662fschema.graphql\u7684\u5185\u5bb9\u3002(\u8fd9\u6b21\u7279\u522b\u6ca1\u505a\u4ec0\u4e48\uff0c\u6240\u4ee5\u662f\u6700\u7b80\u914d\u7f6e)<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">type<\/span> <span class=\"n\">Todo<\/span> <span class=\"err\">@<\/span><span class=\"n\">model<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"n\">id<\/span><span class=\"p\">:<\/span> <span class=\"nb\">ID<\/span><span class=\"p\">!<\/span>\r\n  <span class=\"n\">name<\/span><span class=\"p\">:<\/span> <span class=\"nb\">String<\/span><span class=\"p\">!<\/span>\r\n  <span class=\"n\">description<\/span><span class=\"p\">:<\/span> <span class=\"nb\">String<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<h2>\u90e8\u7f72\u5230AWS\u4e91\u5e73\u53f0\u4e0a<\/h2>\n<p>\u6267\u884camplify push\u547d\u4ee4\uff0c\u5c06API\u90e8\u7f72\u5230AWS\u4e0a\u3002\u7531\u4e8e\u4f1a\u6709\u4e92\u52a8\u5f0f\u95ee\u9898\uff0c\u6211\u4f1a\u9010\u4e00\u56de\u7b54\u3002<\/p>\n<pre class=\"post-pre\"><code>$ amplify push\r\n\u2714 Successfully pulled backend environment dev from the cloud.\r\n\r\nCurrent Environment: dev\r\n\r\n| Category |  Resource name  | Operation | Provider plugin   |\r\n| -------- | --------------- | --------- | ----------------- |\r\n| Api      | AmplifyFunction | Create    | awscloudformation |\r\n? Are you sure you want to continue? Yes\r\n\r\nThe following types do not have '@auth' enabled. Consider using @auth with @model\r\n     - Todo\r\nLearn more about @auth here: https:\/\/docs.amplify.aws\/cli\/graphql-transformer\/directives#auth\r\n\r\n\r\nGraphQL schema compiled successfully.\r\n? Do you want to generate code for your newly created GraphQL API Yes\r\n? Choose the code generation language target typescript\r\n? Enter the file name pattern of graphql queries, mutations and subscriptions src\/graphql\/**\/*.ts\r\n? Do you want to generate\/update all possible GraphQL operations - queries, mutations and subscriptions Yes\r\n? Enter maximum statement depth [increase from default if your schema is deeply nested] 2\r\n? Enter the file name for the generated code src\/api.ts\r\n<\/code><\/pre>\n<p>\u5f53\u56de\u7b54\u5b8c\u6210\u540e\uff0cAWS\u5c06\u5f00\u59cb\u521b\u5efa\u8d44\u6e90\u3002<br \/>\n\u9996\u5148\uff0c\u4f1a\u4f5c\u4e3aCloudFormation\u521b\u5efa\u7684\u5806\u6808\u7684\u5d4c\u5957\u5806\u6808\uff0c<br \/>\n\u5c06\u521b\u5efa\u540e\u7aef\u8d44\u6e90\uff0c\u4f8b\u5982\u89e3\u6790\u5668\uff08AppSync\uff09\u548c\u8868\uff08DynamoDB\uff09\u3002<\/p>\n<p>\u5f53\u5b8c\u6210 amplify push \u4e4b\u540e\uff0c\u5728\u63a7\u5236\u53f0\u4e0a\u4f1a\u663e\u793a API\uff08GraphQL\uff09\u7684\u7aef\u70b9\u548c API \u5bc6\u94a5\u3002\u8fd9\u4e9b\u4fe1\u606f\u4f1a\u81ea\u52a8\u63d2\u5165\u5230 aws-exports.js \u4e2d\u3002<\/p>\n<p>\u8fd9\u6837\u5c31\u5b8c\u6210\u4e86\u540e\u7aef\u7684\u8bbe\u7f6e\u548c\u6784\u5efa\u3002<\/p>\n<h2>\u4e0b\u6b21<\/h2>\n<p>\u8fd9\u4e9b\u90fd\u662f\u5fc5\u5907\u7684\uff0c\u73b0\u5728\u6211\u4eec\u5df2\u7ecf\u5b8c\u6210\u4e86\u6700\u57fa\u672c\u7684\u5ba2\u6237\u7aef\u548c\u540e\u7aef\u73af\u5883\u642d\u5efa\u3002\u4e0b\u6b21\u6211\u4eec\u53ef\u4ee5\u5f00\u59cb\u5c06\u5b83\u4eec\u8fde\u63a5\u8d77\u6765\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u6982\u8ff0 \u4f7f\u7528\u8fc7Amplify\u548cReact\u7684\u4eba\u53ef\u80fd\u65e9\u5c31\u542c\u8bf4\u8fc7\uff0c\u4f46\u662f\u6211\u4e00\u76f4\u6ca1\u6709\u4f7f\u7528\u3002\u8fd9\u7bc7\u6587\u7ae0\u7684\u76ee\u6807\u662f\u4f7f\u7528\u5b83\u4eec\u6765\u521b\u5efa\u4e00 [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-48102","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>\u4f7f\u7528Amplify + AppSync + React + Typescript\u8fdb\u884c\u7b80\u5355\u5e94\u7528\u7a0b\u5e8f\u7684\u521b\u5efa\u2460 - 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\u7528amplify-appsync-react-typescript\u8fdb\u884c\u7b80\u5355\u5e94\u7528\u7a0b\u5e8f\u7684\u521b\u5efa\u2460\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u4f7f\u7528Amplify + AppSync + React + Typescript\u8fdb\u884c\u7b80\u5355\u5e94\u7528\u7a0b\u5e8f\u7684\u521b\u5efa\u2460\" \/>\n<meta property=\"og:description\" content=\"\u6982\u8ff0 \u4f7f\u7528\u8fc7Amplify\u548cReact\u7684\u4eba\u53ef\u80fd\u65e9\u5c31\u542c\u8bf4\u8fc7\uff0c\u4f46\u662f\u6211\u4e00\u76f4\u6ca1\u6709\u4f7f\u7528\u3002\u8fd9\u7bc7\u6587\u7ae0\u7684\u76ee\u6807\u662f\u4f7f\u7528\u5b83\u4eec\u6765\u521b\u5efa\u4e00 [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/zh\/blog\/\u4f7f\u7528amplify-appsync-react-typescript\u8fdb\u884c\u7b80\u5355\u5e94\u7528\u7a0b\u5e8f\u7684\u521b\u5efa\u2460\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-24T09:35:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-29T17:42:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d8349913a08637a6b31a7\/8-0.png\" \/>\n<meta name=\"author\" content=\"\u6e05, \u626c\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u6e05, \u626c\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8amplify-appsync-react-typescript%e8%bf%9b%e8%a1%8c%e7%ae%80%e5%8d%95%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e7%9a%84%e5%88%9b%e5%bb%ba%e2%91%a0\/\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8amplify-appsync-react-typescript%e8%bf%9b%e8%a1%8c%e7%ae%80%e5%8d%95%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e7%9a%84%e5%88%9b%e5%bb%ba%e2%91%a0\/\",\"name\":\"\u4f7f\u7528Amplify + AppSync + React + Typescript\u8fdb\u884c\u7b80\u5355\u5e94\u7528\u7a0b\u5e8f\u7684\u521b\u5efa\u2460 - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\"},\"datePublished\":\"2023-01-24T09:35:59+00:00\",\"dateModified\":\"2024-04-29T17:42:11+00:00\",\"author\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/cb5556d2501da73d864cac945e8d9461\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8amplify-appsync-react-typescript%e8%bf%9b%e8%a1%8c%e7%ae%80%e5%8d%95%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e7%9a%84%e5%88%9b%e5%bb%ba%e2%91%a0\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8amplify-appsync-react-typescript%e8%bf%9b%e8%a1%8c%e7%ae%80%e5%8d%95%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e7%9a%84%e5%88%9b%e5%bb%ba%e2%91%a0\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8amplify-appsync-react-typescript%e8%bf%9b%e8%a1%8c%e7%ae%80%e5%8d%95%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e7%9a%84%e5%88%9b%e5%bb%ba%e2%91%a0\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.silicloud.com\/zh\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u4f7f\u7528Amplify + AppSync + React + Typescript\u8fdb\u884c\u7b80\u5355\u5e94\u7528\u7a0b\u5e8f\u7684\u521b\u5efa\u2460\"}]},{\"@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\/cb5556d2501da73d864cac945e8d9461\",\"name\":\"\u6e05, \u626c\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/32a4239de8ff29adace466261d309424a1e5fe9f7e3036bf89fe03f2e3dbe717?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/32a4239de8ff29adace466261d309424a1e5fe9f7e3036bf89fe03f2e3dbe717?s=96&d=mm&r=g\",\"caption\":\"\u6e05, \u626c\"},\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/author\/qingyang\/\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8amplify-appsync-react-typescript%e8%bf%9b%e8%a1%8c%e7%ae%80%e5%8d%95%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e7%9a%84%e5%88%9b%e5%bb%ba%e2%91%a0\/#local-main-organization-logo\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Blog - Silicon Cloud\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u4f7f\u7528Amplify + AppSync + React + Typescript\u8fdb\u884c\u7b80\u5355\u5e94\u7528\u7a0b\u5e8f\u7684\u521b\u5efa\u2460 - 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\u7528amplify-appsync-react-typescript\u8fdb\u884c\u7b80\u5355\u5e94\u7528\u7a0b\u5e8f\u7684\u521b\u5efa\u2460\/","og_locale":"zh_CN","og_type":"article","og_title":"\u4f7f\u7528Amplify + AppSync + React + Typescript\u8fdb\u884c\u7b80\u5355\u5e94\u7528\u7a0b\u5e8f\u7684\u521b\u5efa\u2460","og_description":"\u6982\u8ff0 \u4f7f\u7528\u8fc7Amplify\u548cReact\u7684\u4eba\u53ef\u80fd\u65e9\u5c31\u542c\u8bf4\u8fc7\uff0c\u4f46\u662f\u6211\u4e00\u76f4\u6ca1\u6709\u4f7f\u7528\u3002\u8fd9\u7bc7\u6587\u7ae0\u7684\u76ee\u6807\u662f\u4f7f\u7528\u5b83\u4eec\u6765\u521b\u5efa\u4e00 [&hellip;]","og_url":"https:\/\/www.silicloud.com\/zh\/blog\/\u4f7f\u7528amplify-appsync-react-typescript\u8fdb\u884c\u7b80\u5355\u5e94\u7528\u7a0b\u5e8f\u7684\u521b\u5efa\u2460\/","og_site_name":"Blog - Silicon Cloud","article_published_time":"2023-01-24T09:35:59+00:00","article_modified_time":"2024-04-29T17:42:11+00:00","og_image":[{"url":"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d8349913a08637a6b31a7\/8-0.png"}],"author":"\u6e05, \u626c","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"\u6e05, \u626c","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"2 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8amplify-appsync-react-typescript%e8%bf%9b%e8%a1%8c%e7%ae%80%e5%8d%95%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e7%9a%84%e5%88%9b%e5%bb%ba%e2%91%a0\/","url":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8amplify-appsync-react-typescript%e8%bf%9b%e8%a1%8c%e7%ae%80%e5%8d%95%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e7%9a%84%e5%88%9b%e5%bb%ba%e2%91%a0\/","name":"\u4f7f\u7528Amplify + AppSync + React + Typescript\u8fdb\u884c\u7b80\u5355\u5e94\u7528\u7a0b\u5e8f\u7684\u521b\u5efa\u2460 - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website"},"datePublished":"2023-01-24T09:35:59+00:00","dateModified":"2024-04-29T17:42:11+00:00","author":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/cb5556d2501da73d864cac945e8d9461"},"breadcrumb":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8amplify-appsync-react-typescript%e8%bf%9b%e8%a1%8c%e7%ae%80%e5%8d%95%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e7%9a%84%e5%88%9b%e5%bb%ba%e2%91%a0\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8amplify-appsync-react-typescript%e8%bf%9b%e8%a1%8c%e7%ae%80%e5%8d%95%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e7%9a%84%e5%88%9b%e5%bb%ba%e2%91%a0\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8amplify-appsync-react-typescript%e8%bf%9b%e8%a1%8c%e7%ae%80%e5%8d%95%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e7%9a%84%e5%88%9b%e5%bb%ba%e2%91%a0\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.silicloud.com\/zh\/blog\/"},{"@type":"ListItem","position":2,"name":"\u4f7f\u7528Amplify + AppSync + React + Typescript\u8fdb\u884c\u7b80\u5355\u5e94\u7528\u7a0b\u5e8f\u7684\u521b\u5efa\u2460"}]},{"@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\/cb5556d2501da73d864cac945e8d9461","name":"\u6e05, \u626c","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/32a4239de8ff29adace466261d309424a1e5fe9f7e3036bf89fe03f2e3dbe717?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/32a4239de8ff29adace466261d309424a1e5fe9f7e3036bf89fe03f2e3dbe717?s=96&d=mm&r=g","caption":"\u6e05, \u626c"},"url":"https:\/\/www.silicloud.com\/zh\/blog\/author\/qingyang\/"},{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e4%bd%bf%e7%94%a8amplify-appsync-react-typescript%e8%bf%9b%e8%a1%8c%e7%ae%80%e5%8d%95%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f%e7%9a%84%e5%88%9b%e5%bb%ba%e2%91%a0\/#local-main-organization-logo","url":"","contentUrl":"","caption":"Blog - Silicon Cloud"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/48102","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\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/comments?post=48102"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/48102\/revisions"}],"predecessor-version":[{"id":88915,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/48102\/revisions\/88915"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/media?parent=48102"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/categories?post=48102"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/tags?post=48102"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}