{"id":47919,"date":"2023-08-26T14:13:35","date_gmt":"2023-09-28T03:13:06","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%9c%a8-amplify-api-%e4%b8%8a%e8%bd%bb%e6%9d%be%e6%9e%84%e5%bb%ba%e5%90%8e%e7%ab%af%e3%80%82\/"},"modified":"2024-04-30T20:12:03","modified_gmt":"2024-04-30T12:12:03","slug":"%e5%9c%a8-amplify-api-%e4%b8%8a%e8%bd%bb%e6%9d%be%e6%9e%84%e5%bb%ba%e5%90%8e%e7%ab%af%e3%80%82","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%9c%a8-amplify-api-%e4%b8%8a%e8%bd%bb%e6%9d%be%e6%9e%84%e5%bb%ba%e5%90%8e%e7%ab%af%e3%80%82\/","title":{"rendered":"\u5728 Amplify API \u4e0a\u8f7b\u677e\u6784\u5efa\u540e\u7aef"},"content":{"rendered":"<p>\u672c\u6b21\u4ecb\u7ecd\u4f7f\u7528Amplify-CLI\u6784\u5efaGraphQL\u540e\u7aefAPI\u3002<br \/>\n\u6b65\u9aa4\u53ef\u53c2\u8003\u5b98\u65b9\u6307\u5357\u3002<\/p>\n<h1>GraphQL\u662f\u4e00\u79cd\u4e0eAWS AppSync\u76f8\u7ed3\u5408\u7684\u5e94\u7528\u7a0b\u5e8f\u5f00\u53d1\u5de5\u5177\u3002<\/h1>\n<p>GraphQL\u662f\u7531Facebook\u548c\u793e\u533a\u5f00\u53d1\u7684\u4e00\u79cd\u67e5\u8be2\u8bed\u8a00\u3002\u5b83\u662f\u4e3a\u4e86\u89e3\u51b3\u4f20\u7edfREST\u4e2d\u7684\u4ee5\u4e0b\u4e09\u4e2a\u4e3b\u8981\u95ee\u9898\u800c\u5f00\u53d1\u7684\u3002<br \/>\n\u6839\u636eGraphQL\u5b98\u65b9\u7f51\u7ad9\u7684\u8d44\u6599\uff0c\u8fd8\u8bb0\u5f55\u4e86\u5176\u4ed6\u7684\u4f18\u52bf\u3002<\/p>\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\u5728\u4e2d\u6587\u4e2d\u91cd\u65b0\u89e3\u91ca\u4ee5\u4e0a\u53e5\u5b50\uff1a<\/ol>\n<\/li>\n<\/ol>\n<p>\u904e\u591a\u5730\u83b7\u53d6\u6570\u636e\uff08\u8fd4\u56de\u4e86\u5ba2\u6237\u7aef\u4e0d\u9700\u8981\u7684\u6570\u636e\uff0c\u5bfc\u81f4\u8d44\u6e90\u7684\u6d6a\u8d39\uff09<br \/>\n\u9700\u8981\u5bf9\u591a\u4e2aURL\u8fdb\u884c\u8bbf\u95ee\uff08\u5373\u4f7f\u53ea\u8981\u5b9e\u73b0\u4e00\u4e2a\u64cd\u4f5c\uff0c\u4e5f\u9700\u8981\u8bbf\u95ee\u591a\u4e2a\u7ec8\u7aef\u8282\u70b9\uff09<br \/>\n\u524d\u7aef\u548c\u540e\u7aef\u4e4b\u95f4\u7684\u89c4\u8303\u4e0d\u4e00\u81f4\uff08\u5373\u4f7f\u5728\u89c4\u8303\u6587\u4ef6\u4e2d\u8bb0\u5f55\u4e86\u534f\u8bae\uff0c\u4f46\u7ecf\u5e38\u51fa\u73b0\u65e0\u6cd5\u53ca\u65f6\u9002\u5e94\u89c4\u8303\u53d8\u66f4\u7684\u4e0d\u4e00\u81f4\uff09<\/p>\n<p>AppSync\u662f\u4e00\u79cd\u4f7f\u7528GraphQL\u7684AWS\u6258\u7ba1\u670d\u52a1\u3002<br \/>\n\u672c\u6b21\u6211\u4eec\u5c06\u4ecb\u7ecd\u5982\u4f55\u4f7f\u7528Amplify\u6784\u5efaAppSync\u7684API\u3002<\/p>\n<h1>\u9884\u5148\u51c6\u5907<\/h1>\n<h2>\u5b89\u88c5 Amplify CLI<\/h2>\n<pre class=\"post-pre\"><code>npm install -g @aws-amplify\/cli\r\namplify configure\r\n<\/code><\/pre>\n<h2>\u653e\u5927\u5668\u7684\u521d\u59cb\u8bbe\u7f6e<\/h2>\n<pre class=\"post-pre\"><code>amplify init\r\n<\/code><\/pre>\n<p>\u56e0\u4e3aamplify-cli\u5c06\u4ee5\u4ea4\u4e92\u5f0f\u7684\u65b9\u5f0f\u8be2\u95ee\u914d\u7f6e\u4fe1\u606f\uff0c\u6240\u4ee5\u6211\u4f1a\u56de\u7b54\u5b83\u3002<br \/>\n\u4e0e\u4ee5\u524d\u7684\u6587\u7ae0\u76f8\u540c\uff0c\u56e0\u6b64\u4e0d\u518d\u8d58\u8ff0\u8bf4\u660e\u3002<\/p>\n<h2>\u521b\u5efaAPI<\/h2>\n<pre class=\"post-pre\"><code>amplify add api\r\n<\/code><\/pre>\n<p>\u56e0\u4e3a\u5b83\u662f\u4ea4\u4e92\u5f0f\u7684\uff0c\u6240\u4ee5\u56de\u7b54\u5b83\u7684\u95ee\u9898\u3002<\/p>\n<pre class=\"post-pre\"><code>? Please select from one of the below mentioned services GraphQL\r\n? Provide API name: AmplifyFunction\r\n? Choose an authorization type for the API Amazon Cognito User Pool\r\nUsing service: Cognito, provided by: awscloudformation\r\n\r\n The current configured provider is Amazon Cognito.\r\n\r\n Do you want to use the default authentication and security configuration? Defau\r\nlt configuration\r\n Warning: you will not be able to edit these selections.\r\n How do you want users to be able to sign in when using your Cognito User Pool?\r\nEmail\r\n Warning: you will not be able to edit these selections.\r\n What attributes are required for signing up? (Press &lt;space&gt; to select, &lt;a&gt; to t\r\noggle all, &lt;i&gt; to invert selection)Email\r\nSuccessfully added auth resource\r\n? Do you have an annotated GraphQL schema? No\r\n? Do you want a guided schema creation? Yes\r\n? What best describes your project: Single object with fields (e.g., \u201cTodo\u201d with\r\n ID, name, description)\r\n? Do you want to edit the schema now? Yes\r\n<\/code><\/pre>\n<p>\u7f16\u8f91\u5668\u5c06\u5728\u8fd9\u91cc\u542f\u52a8\u3002<br \/>\n\u7531\u4e8e\u5df2\u7ecf\u81ea\u52a8\u751f\u6210\u4e86\u540d\u4e3aschema.graphql\u7684\u6587\u4ef6\uff0c\u56e0\u6b64\u9700\u8981\u6839\u636e\u9700\u8981\u66f4\u6539\u6a21\u5f0f\u5b9a\u4e49\u3002<\/p>\n<p>\u4ee5\u4e0b\u662f\u6dfb\u52a0\u4e86title\u5b57\u6bb5\u7684\u6a21\u5f0f\u793a\u4f8b<\/p>\n<pre class=\"post-pre\"><code>type Todo @model {\r\n  id: ID!\r\n  name: String!\r\n  description: String\r\n  title: String\r\n}\r\n<\/code><\/pre>\n<p>\u5728\u7c7b\u578b(type)\u4e2d\u6dfb\u52a0@model\u6307\u4ee4\u5c06\u521b\u5efa\u8868\u683c\u3002<br \/>\n\u5728\u6a21\u5f0f\u5b9a\u4e49\u4e2d\uff0c\u8fd8\u63d0\u4f9b\u4e86\u5176\u4ed6\u5404\u79cd\u6307\u4ee4\uff08@key\u3001@auth\u3001@connection\u7b49\uff09\u3002<br \/>\n\u8bf7\u53c2\u8003\u6b64\u5904\u4ee5\u83b7\u53d6\u66f4\u591a\u8be6\u7ec6\u4fe1\u606f\u3002<\/p>\n<p>\u5f53schema.graphql\u7684\u6a21\u5f0f\u5b9a\u4e49\u5b8c\u6210\u540e\uff0c\u4fdd\u5b58\u5e76\u8fd4\u56de\u7ec8\u7aef\u3002<br \/>\n\u4f60\u5e94\u8be5\u4f1a\u770b\u5230&#8221;\u8bf7\u6309\u56de\u8f66\u952e\u7ee7\u7eed&#8221;\u7684\u63d0\u793a\uff0c\u7136\u540e\u8bf7\u6309\u4e0b\u56de\u8f66\u952e\u3002<\/p>\n<p>\u6700\u540e\uff0c\u6267\u884c\u4ee5\u4e0b\u547d\u4ee4\u8fdb\u884c\u90e8\u7f72\u3002<\/p>\n<pre class=\"post-pre\"><code>amplify push\r\n<\/code><\/pre>\n<p>\u5c06\u663e\u793a\u65b0\u521b\u5efa\u7684\u8eab\u4efd\u9a8c\u8bc1\u548c API \u8d44\u6e90\u3002<\/p>\n<pre class=\"post-pre\"><code>\r\n| Category | Resource name           | Operation | Provider plugin   |\r\n| -------- | ----------------------- | --------- | ----------------- |\r\n| Auth     | amplifyfunctiondxxxxxxx | Create    | awscloudformation |\r\n| Api      | AmplifyFunction         | Create    | awscloudformation |\r\n<\/code><\/pre>\n<p>\u5b8c\u6210\u90e8\u7f72\u540e\uff0c\u63a5\u4e0b\u6765\u6211\u4eec\u5c06\u4ee5\u4e92\u52a8\u65b9\u5f0f\u56de\u7b54\u4e00\u4e9b\u95ee\u9898\uff08\u57fa\u672c\u4e0a\u90fd\u662f&#8221;Yes&#8221;\uff09\uff0c\u7136\u540e\u6267\u884c\u90e8\u7f72\u3002<\/p>\n<pre class=\"post-pre\"><code>? 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 sr\r\nc\/graphql\/**\/*.ts\r\n? Do you want to generate\/update all possible GraphQL operations - queries, muta\r\ntions and subscriptions Yes\r\n? Enter maximum statement depth [increase from default if your schema is deeply\r\nnested] 2\r\n? Enter the file name for the generated code src\/API.ts\r\n<\/code><\/pre>\n<p>\u4e00\u65e6\u6210\u529f\u90e8\u7f72\u5b8c\u6210\uff0c\u60a8\u53ef\u4ee5\u901a\u8fc7\u8bbf\u95eeAWS\u63a7\u5236\u53f0\u6765\u786e\u8ba4\u8d44\u6e90\u5df2\u7ecf\u521b\u5efa\u3002<\/p>\n<p>\u4f7f\u7528Amplify\u521b\u5efaAPI\u65f6\uff0c\u4f1a\u81ea\u52a8\u751f\u6210\u6807\u51c6\u7684CRUD\u64cd\u4f5c\u6240\u9700\u7684\u67e5\u8be2\u3002\u867d\u7136\u60a8\u53ef\u4ee5\u6839\u636e\u9700\u8981\u5b9a\u4e49\u81ea\u5df1\u7684\u67e5\u8be2\uff0c\u4f46\u5bf9\u4e8e\u7b80\u5355\u7684\u5e94\u7528\u7a0b\u5e8f\u6765\u8bf4\uff0c\u53ea\u4f7f\u7528\u8fd9\u4e9b\u81ea\u52a8\u751f\u6210\u7684\u67e5\u8be2\u5c31\u8db3\u591f\u4e86\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">getTodo<\/span> <span class=\"o\">=<\/span> <span class=\"s2\">`query GetTodo($id: ID!) {\r\n  getTodo(id: $id) {\r\n    id\r\n    name\r\n    description\r\n    title\r\n  }\r\n}\r\n`<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">listTodos<\/span> <span class=\"o\">=<\/span> <span class=\"s2\">`query ListTodos(\r\n  $filter: ModelTodoFilterInput\r\n  $limit: Int\r\n  $nextToken: String\r\n) {\r\n  listTodos(filter: $filter, limit: $limit, nextToken: $nextToken) {\r\n    items {\r\n      id\r\n      name\r\n      description\r\n      title\r\n    }\r\n    nextToken\r\n  }\r\n}\r\n`<\/span><span class=\"p\">;<\/span>\r\n<\/code><\/pre>\n<pre class=\"post-pre\"><code><span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">createTodo<\/span> <span class=\"o\">=<\/span> <span class=\"s2\">`mutation CreateTodo($input: CreateTodoInput!) {\r\n  createTodo(input: $input) {\r\n    id\r\n    name\r\n    description\r\n    title\r\n  }\r\n}\r\n`<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"p\">...<\/span><span class=\"nx\">\u306a\u3069\u306a\u3069<\/span>\r\n<\/code><\/pre>\n<pre class=\"post-pre\"><code><span class=\"k\">export<\/span> <span class=\"kd\">const<\/span> <span class=\"nx\">onCreateTodo<\/span> <span class=\"o\">=<\/span> <span class=\"s2\">`subscription OnCreateTodo {\r\n  onCreateTodo {\r\n    id\r\n    name\r\n    description\r\n    title\r\n  }\r\n}\r\n`<\/span><span class=\"p\">;<\/span>\r\n<span class=\"p\">...<\/span><span class=\"nx\">\u306a\u3069\u306a\u3069<\/span>\r\n<\/code><\/pre>\n<h2>\u4f7f\u7528API<\/h2>\n<p>\u5f53\u90e8\u7f72\u5b8c\u6210\u540e\uff0c\u5c06\u5728src\u6587\u4ef6\u5939\u7684\u6839\u76ee\u5f55\u4e0b\u751f\u6210\u4e00\u4e2a\u540d\u4e3a&#8221;aws-exports.js&#8221;\u7684\u6587\u4ef6\u3002\u8be5\u6587\u4ef6\u8bb0\u5f55\u4e86\u4e0e\u540e\u7aef\u8fde\u63a5\u7684AppSync\u7aef\u70b9\u3001\u533a\u57df\u3001\u8ba4\u8bc1\u65b9\u5f0f\u7b49\u4fe1\u606f\u3002\u5728\u5c06\u8be5\u5e94\u7528\u7a0b\u5e8f\u96c6\u6210\u5e76\u4f7f\u7528\u65f6\uff0c\u9700\u8981\u8bfb\u53d6\u5e76\u4f7f\u7528\u8be5\u6587\u4ef6\u3002<\/p>\n<p>\u6bd4\u5982\u8bf4\uff0c\u5c31\u50cf\u4e0b\u9762\u8fd9\u6837\u7684\u611f\u89c9\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"nx\">awsmobile<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/aws-exports<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\r\n<span class=\"nx\">Amplify<\/span><span class=\"p\">.<\/span><span class=\"nx\">configure<\/span><span class=\"p\">(<\/span><span class=\"nx\">awsmobile<\/span><span class=\"p\">)<\/span>\r\n\r\n<span class=\"kd\">const<\/span> <span class=\"nx\">App<\/span><span class=\"p\">:<\/span> <span class=\"nx\">React<\/span><span class=\"p\">.<\/span><span class=\"nx\">FC<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"k\">return<\/span> <span class=\"p\">(<\/span>\r\n      <span class=\"p\">...<\/span><span class=\"nx\">snip<\/span><span class=\"p\">...<\/span>\r\n  <span class=\"p\">);<\/span>\r\n<span class=\"p\">}<\/span>\r\n\r\n<\/code><\/pre>\n<p>API\u8c03\u7528\u7684\u611f\u89c9\u5982\u4e0b\uff1a<\/p>\n<h3>\u67e5\u8a62<\/h3>\n<p>\uff08\u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0clist\u6700\u591a\u53ea\u80fd\u83b7\u53d610\u6761\u8bb0\u5f55\uff0c\u6240\u4ee5\u8bf7\u6839\u636e\u9700\u8981\u9002\u5f53\u66f4\u6539limit\u7684\u503c\u3002\uff09<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">API<\/span><span class=\"p\">,<\/span> <span class=\"nx\">graphqlOperation<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">aws-amplify<\/span><span class=\"dl\">'<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">listTodos<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/graphql\/queries<\/span><span class=\"dl\">'<\/span>\r\n\r\n\r\n<span class=\"c1\">\/\/Todo\u30ea\u30b9\u30c8\u53d6\u5f97\u3059\u308b\u5b9f\u88c5\u629c\u7c8b<\/span>\r\n<span class=\"kd\">const<\/span> <span class=\"nx\">result<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">API<\/span><span class=\"p\">.<\/span><span class=\"nx\">graphql<\/span><span class=\"p\">(<\/span><span class=\"nx\">graphqlOperation<\/span><span class=\"p\">(<\/span><span class=\"nx\">listTodos<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"na\">limit<\/span><span class=\"p\">:<\/span> <span class=\"mi\">1000<\/span> <span class=\"p\">}))<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">GraphQLResult<\/span>\r\n<span class=\"kd\">const<\/span> <span class=\"nx\">query<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">result<\/span><span class=\"p\">.<\/span><span class=\"nx\">data<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">ListTodosQuery<\/span>\r\n<span class=\"k\">if<\/span> <span class=\"p\">(<\/span><span class=\"nx\">query<\/span><span class=\"p\">.<\/span><span class=\"nx\">listTodos<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\r\n   <span class=\"kd\">const<\/span> <span class=\"nx\">list<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">query<\/span><span class=\"p\">.<\/span><span class=\"nx\">listTodos<\/span><span class=\"p\">.<\/span><span class=\"nx\">items<\/span> <span class=\"k\">as<\/span> <span class=\"nb\">Array<\/span><span class=\"o\">&lt;<\/span><span class=\"nx\">CreateTodoInput<\/span><span class=\"o\">&gt;<\/span>\r\n   <span class=\"k\">return<\/span> <span class=\"nx\">list<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<h3>\u53d8\u5f02<\/h3>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">API<\/span><span class=\"p\">,<\/span> <span class=\"nx\">graphqlOperation<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">aws-amplify<\/span><span class=\"dl\">'<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">createTodo<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/graphql\/mutations<\/span><span class=\"dl\">'<\/span>\r\n\r\n<span class=\"c1\">\/\/Todo\u8ffd\u52a0\u3059\u308b\u5b9f\u88c5\u629c\u7c8b<\/span>\r\n<span class=\"kd\">const<\/span> <span class=\"nx\">input<\/span><span class=\"p\">:<\/span> <span class=\"nx\">CreateTodoInput<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\r\n   <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">hoge<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\r\n   <span class=\"na\">description<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">fuga<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\r\n   <span class=\"na\">title<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">piyo<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\r\n<span class=\"p\">}<\/span>\r\n<span class=\"kd\">const<\/span> <span class=\"nx\">newTodo<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">API<\/span><span class=\"p\">.<\/span><span class=\"nx\">graphql<\/span><span class=\"p\">(<\/span><span class=\"nx\">graphqlOperation<\/span><span class=\"p\">(<\/span><span class=\"nx\">createTodo<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">input<\/span> <span class=\"p\">}))<\/span>\r\n<\/code><\/pre>\n<h3>\u8a02\u95b1<\/h3>\n<pre class=\"post-pre\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">API<\/span><span class=\"p\">,<\/span> <span class=\"nx\">graphqlOperation<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">aws-amplify<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">onUpdateTodo<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">..\/graphql\/subscriptions<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\r\n\r\n<span class=\"c1\">\/\/\u66f4\u65b0\u3055\u308c\u305fTodo\u3092\u30b5\u30d6\u30b9\u30af\u30e9\u30a4\u30d6\u3059\u308b\u5b9f\u88c5\u629c\u7c8b<\/span>\r\n<span class=\"kd\">const<\/span> <span class=\"nx\">subscription<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">API<\/span><span class=\"p\">.<\/span><span class=\"nx\">graphql<\/span><span class=\"p\">(<\/span><span class=\"nx\">graphqlOperation<\/span><span class=\"p\">(<\/span><span class=\"nx\">onUpdateTodo<\/span><span class=\"p\">)).<\/span><span class=\"nx\">subscribe<\/span><span class=\"p\">({<\/span>\r\n        <span class=\"na\">next<\/span><span class=\"p\">:<\/span> <span class=\"p\">(<\/span><span class=\"na\">response<\/span><span class=\"p\">:<\/span> <span class=\"kr\">any<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\r\n            <span class=\"kd\">const<\/span> <span class=\"nx\">todo<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nx\">value<\/span><span class=\"p\">.<\/span><span class=\"nx\">data<\/span><span class=\"p\">.<\/span><span class=\"nx\">onUpdateTodo<\/span> <span class=\"k\">as<\/span> <span class=\"nx\">UpdateTodoInput<\/span>\r\n            <span class=\"c1\">\/\/do something<\/span>\r\n        <span class=\"p\">}<\/span>\r\n    <span class=\"p\">})<\/span>\r\n\r\n<\/code><\/pre>\n<h1>\u603b\u7ed3<\/h1>\n<p>\u8fd9\u6b21\u6211\u5c1d\u8bd5\u4f7f\u7528Amplify Add API\u5feb\u901f\u6784\u5efa\u540e\u7aef\u3002\u53ea\u9700\u8981\u975e\u5e38\u7b80\u5355\u7684\u6b65\u9aa4\uff0c\u5c31\u80fd\u591f\u5f88\u5feb\u5730\u521b\u5efa\u5b8c\u6210\u3002\u867d\u7136\u672c\u6b21\u53ea\u4ecb\u7ecd\u4e86\u7b80\u5355\u7684\u521b\u5efa\u8868\u683c\u7684\u60c5\u51b5\uff0c\u4f46\u662f\u5728Amplify\u4e2d\uff0cschema.graphql\u63d0\u4f9b\u4e86\u5404\u79cd\u4e0d\u540c\u7684\u7c7b\u522b\uff0c\u53ef\u4ee5\u8f7b\u677e\u5730\u6784\u5efa\u590d\u6742\u7684\u7cfb\u7edf\u7ed3\u6784\u3002\u5982\u679c\u6709\u673a\u4f1a\u7684\u8bdd\uff0c\u6211\u4f1a\u518d\u4ecb\u7ecd\u7ed9\u5927\u5bb6\uff0c\u4f46\u662f\u8fd9\u6b21\u5c31\u5230\u8fd9\u91cc\u4e86\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u672c\u6b21\u4ecb\u7ecd\u4f7f\u7528Amplify-CLI\u6784\u5efaGraphQL\u540e\u7aefAPI\u3002 \u6b65\u9aa4\u53ef\u53c2\u8003\u5b98\u65b9\u6307\u5357\u3002 GraphQL\u662f\u4e00\u79cd\u4e0e [&hellip;]<\/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-47919","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>\u5728 Amplify API \u4e0a\u8f7b\u677e\u6784\u5efa\u540e\u7aef - 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\/\u5728-amplify-api-\u4e0a\u8f7b\u677e\u6784\u5efa\u540e\u7aef\u3002\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u5728 Amplify API \u4e0a\u8f7b\u677e\u6784\u5efa\u540e\u7aef\" \/>\n<meta property=\"og:description\" content=\"\u672c\u6b21\u4ecb\u7ecd\u4f7f\u7528Amplify-CLI\u6784\u5efaGraphQL\u540e\u7aefAPI\u3002 \u6b65\u9aa4\u53ef\u53c2\u8003\u5b98\u65b9\u6307\u5357\u3002 GraphQL\u662f\u4e00\u79cd\u4e0e [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/zh\/blog\/\u5728-amplify-api-\u4e0a\u8f7b\u677e\u6784\u5efa\u540e\u7aef\u3002\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:published_time\" content=\"2023-09-28T03:13:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-30T12:12:03+00:00\" \/>\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=\"3 \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\/%e5%9c%a8-amplify-api-%e4%b8%8a%e8%bd%bb%e6%9d%be%e6%9e%84%e5%bb%ba%e5%90%8e%e7%ab%af%e3%80%82\/\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e5%9c%a8-amplify-api-%e4%b8%8a%e8%bd%bb%e6%9d%be%e6%9e%84%e5%bb%ba%e5%90%8e%e7%ab%af%e3%80%82\/\",\"name\":\"\u5728 Amplify API \u4e0a\u8f7b\u677e\u6784\u5efa\u540e\u7aef - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\"},\"datePublished\":\"2023-09-28T03:13:06+00:00\",\"dateModified\":\"2024-04-30T12:12:03+00:00\",\"author\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/513018e4e121d3add1b7c5de8be21458\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e5%9c%a8-amplify-api-%e4%b8%8a%e8%bd%bb%e6%9d%be%e6%9e%84%e5%bb%ba%e5%90%8e%e7%ab%af%e3%80%82\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/zh\/blog\/%e5%9c%a8-amplify-api-%e4%b8%8a%e8%bd%bb%e6%9d%be%e6%9e%84%e5%bb%ba%e5%90%8e%e7%ab%af%e3%80%82\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e5%9c%a8-amplify-api-%e4%b8%8a%e8%bd%bb%e6%9d%be%e6%9e%84%e5%bb%ba%e5%90%8e%e7%ab%af%e3%80%82\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.silicloud.com\/zh\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u5728 Amplify API \u4e0a\u8f7b\u677e\u6784\u5efa\u540e\u7aef\"}]},{\"@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\/%e5%9c%a8-amplify-api-%e4%b8%8a%e8%bd%bb%e6%9d%be%e6%9e%84%e5%bb%ba%e5%90%8e%e7%ab%af%e3%80%82\/#local-main-organization-logo\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Blog - Silicon Cloud\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u5728 Amplify API \u4e0a\u8f7b\u677e\u6784\u5efa\u540e\u7aef - 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\/\u5728-amplify-api-\u4e0a\u8f7b\u677e\u6784\u5efa\u540e\u7aef\u3002\/","og_locale":"zh_CN","og_type":"article","og_title":"\u5728 Amplify API \u4e0a\u8f7b\u677e\u6784\u5efa\u540e\u7aef","og_description":"\u672c\u6b21\u4ecb\u7ecd\u4f7f\u7528Amplify-CLI\u6784\u5efaGraphQL\u540e\u7aefAPI\u3002 \u6b65\u9aa4\u53ef\u53c2\u8003\u5b98\u65b9\u6307\u5357\u3002 GraphQL\u662f\u4e00\u79cd\u4e0e [&hellip;]","og_url":"https:\/\/www.silicloud.com\/zh\/blog\/\u5728-amplify-api-\u4e0a\u8f7b\u677e\u6784\u5efa\u540e\u7aef\u3002\/","og_site_name":"Blog - Silicon Cloud","article_published_time":"2023-09-28T03:13:06+00:00","article_modified_time":"2024-04-30T12:12:03+00:00","author":"\u5b87, \u534e","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"\u5b87, \u534e","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"3 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%9c%a8-amplify-api-%e4%b8%8a%e8%bd%bb%e6%9d%be%e6%9e%84%e5%bb%ba%e5%90%8e%e7%ab%af%e3%80%82\/","url":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%9c%a8-amplify-api-%e4%b8%8a%e8%bd%bb%e6%9d%be%e6%9e%84%e5%bb%ba%e5%90%8e%e7%ab%af%e3%80%82\/","name":"\u5728 Amplify API \u4e0a\u8f7b\u677e\u6784\u5efa\u540e\u7aef - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website"},"datePublished":"2023-09-28T03:13:06+00:00","dateModified":"2024-04-30T12:12:03+00:00","author":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/513018e4e121d3add1b7c5de8be21458"},"breadcrumb":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%9c%a8-amplify-api-%e4%b8%8a%e8%bd%bb%e6%9d%be%e6%9e%84%e5%bb%ba%e5%90%8e%e7%ab%af%e3%80%82\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/zh\/blog\/%e5%9c%a8-amplify-api-%e4%b8%8a%e8%bd%bb%e6%9d%be%e6%9e%84%e5%bb%ba%e5%90%8e%e7%ab%af%e3%80%82\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e5%9c%a8-amplify-api-%e4%b8%8a%e8%bd%bb%e6%9d%be%e6%9e%84%e5%bb%ba%e5%90%8e%e7%ab%af%e3%80%82\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.silicloud.com\/zh\/blog\/"},{"@type":"ListItem","position":2,"name":"\u5728 Amplify API \u4e0a\u8f7b\u677e\u6784\u5efa\u540e\u7aef"}]},{"@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\/%e5%9c%a8-amplify-api-%e4%b8%8a%e8%bd%bb%e6%9d%be%e6%9e%84%e5%bb%ba%e5%90%8e%e7%ab%af%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\/47919","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=47919"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/47919\/revisions"}],"predecessor-version":[{"id":94046,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/47919\/revisions\/94046"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/media?parent=47919"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/categories?post=47919"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/tags?post=47919"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}