{"id":47911,"date":"2024-01-10T05:14:18","date_gmt":"2023-08-15T08:33:11","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90nuxt-js%e3%80%91%e7%94%a8-pokemon-%e6%95%99%e4%bd%a0%e5%ad%a6%e4%b9%a0-graphql%e3%80%82\/"},"modified":"2024-05-04T17:37:50","modified_gmt":"2024-05-04T09:37:50","slug":"%e3%80%90nuxt-js%e3%80%91%e7%94%a8-pokemon-%e6%95%99%e4%bd%a0%e5%ad%a6%e4%b9%a0-graphql%e3%80%82","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90nuxt-js%e3%80%91%e7%94%a8-pokemon-%e6%95%99%e4%bd%a0%e5%ad%a6%e4%b9%a0-graphql%e3%80%82\/","title":{"rendered":"\u3010Nuxt.js\u3011\u7528 Pok\u00e9mon \u6559\u4f60\u5b66\u4e60 GraphQL"},"content":{"rendered":"<p>\u6211\u5c06\u4f7f\u7528GraphQL Pokemon\u6765\u5b66\u4e60GraphQL\u3002<\/p>\n<h1>GraphQL\u662f\u4ec0\u4e48\uff1f<\/h1>\n<p>GraphQL\u662f\u7531Facebook\u53d1\u5e03\u7684\u7528\u4e8eWeb API\u7684\u67e5\u8be2\u8bed\u8a00\u3002<\/p>\n<p>\u4e0eREST API\u76f8\u6bd4\uff0c<br \/>\n1. \u53ea\u9700\u8981\u4e00\u4e2a\u7ec8\u7aef\u70b9\uff08\u5982\/user\u3001\/post\/:id\u7b49\uff09\u3002<br \/>\n2. \u53ef\u5728\u5ba2\u6237\u7aef\u81ea\u4e3b\u9009\u62e9\u83b7\u53d6\u7684\u6570\u636e\u3002<br \/>\n3. \u53ef\u4ee5\u5b9a\u4e49\u8bf7\u6c42\u548c\u54cd\u5e94\u7684\u6570\u636e\u7c7b\u578b\u3002<br \/>\n\u7b49\u7b49\uff0c\u6709\u8bf8\u591a\u4f18\u70b9\u3002<\/p>\n<h1>\u8ba9\u6211\u4eec\u5c1d\u8bd5\u4f7f\u7528GraphQL\u3002<\/h1>\n<p>\u4e3a\u4e86\u4eceGraphQL Pokemon\u63a7\u5236\u53f0\u83b7\u53d6\u6570\u636e\uff0c\u53d1\u9001\u67e5\u8be2\u3002<\/p>\n<blockquote><p>GraphQL\u6709\u4e09\u79cd\u7c7b\u578b\u7684\u67e5\u8be2\uff1a<br \/>\n&#8211; query\uff08\u83b7\u53d6\u6570\u636e\uff09\u4f7f\u7528GET\u8bf7\u6c42<br \/>\n&#8211; mutation\uff08\u66f4\u65b0\u6570\u636e\uff09\u4f7f\u7528POST\/PUT\/DELETE\u7b49\u8bf7\u6c42<br \/>\n&#8211; subscription\uff08\u4ece\u670d\u52a1\u5668\u7aef\u63a5\u6536\u4e8b\u4ef6\u901a\u77e5\uff09\u901a\u8fc7Websocket\u5b9e\u73b0<\/p><\/blockquote>\n<p>\u6bd4\u5982\u8981\u83b7\u53d6\u76ae\u5361\u4e18\u7684\u540d\u5b57\uff0c\u53ef\u4ee5\u4f7f\u7528query\u3002<\/p>\n<pre class=\"post-pre\"><code>query {\r\n  pokemon(name: \"pikachu\") {\r\n    name\r\n  }\r\n}\r\n<\/code><\/pre>\n<p>\u5c06\u8fd9\u4e2a\u67e5\u8be2\u590d\u5236\u5230GraphQL Pokemon\u63a7\u5236\u53f0\u4e0a\uff0c\u7136\u540e\u70b9\u51fb[\u25b6]\u6309\u94ae&#8230;&#8230;<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d820e913a08637a6aec50\/10-0.com%2Fa9bf7ff8902597e92cce3e73620b0316%2Fraw\" alt=\"demo\" \/><\/div>\n<p>\u5c4f\u5e55\u4f1a\u53d8\u6210\u8fd9\u6837\u5417\uff1f hu\u00ec ma?)<\/p>\n<p>\u5728\u53f3\u4fa7\u663e\u793a\u5bf9\u67e5\u8be2\u7684\u54cd\u5e94\uff0c\u6211\u4eec\u53ef\u4ee5\u770b\u5230\u53ea\u80fd\u83b7\u53d6\u5230\u76ae\u5361\u4e18\u7684\u540d\u5b57\u3002<\/p>\n<hr \/>\n<hr \/>\n<p>\u90a3\u4e48\uff0c\u8ba9\u6211\u4eec\u5c1d\u8bd5\u5c06GraphQL\u96c6\u6210\u5230\u9879\u76ee\u4e2d\u3002<\/p>\n<h1>\u521b\u5efaNuxt\u9879\u76ee<\/h1>\n<p>\u51fa\u4e8e\u4e2a\u4eba\u539f\u56e0\uff0c\u6211\u5c06\u5728Nuxt.js\u4e2d\u4f7f\u7528GraphQL\u3002<\/p>\n<pre class=\"post-pre\"><code>$ npx create-nuxt-app poke-gql\r\n\r\ncreate-nuxt-app v3.4.0\r\n\u2728  Generating Nuxt.js project in poke-gql\r\n? Project name: poke-gql\r\n? Programming language: JavaScript\r\n? Package manager: Yarn\r\n? UI framework: None\r\n? Nuxt.js modules: (Press &lt;space&gt; to select, &lt;a&gt; to toggle all, &lt;i&gt; to invert se\r\nlection)\r\n? Linting tools: ESLint, Prettier\r\n? Testing framework: None\r\n? Rendering mode: Single Page App\r\n? Deployment target: Server (Node.js hosting)\r\n? Development tools: (Press &lt;space&gt; to select, &lt;a&gt; to toggle all, &lt;i&gt; to invert \r\nselection)\r\n? Continuous integration: None\r\n? Version control system: Git\r\n<\/code><\/pre>\n<h1>\u963f\u6ce2\u7f57\u5ba2\u6237\u7aef<\/h1>\n<p>\u4e3a\u4e86\u5728\u5ba2\u6237\u7aef\u4f7f\u7528GraphQL\uff0c\u9700\u8981\u4f7f\u7528\u4e00\u4e2a\u53eb\u505a Apollo Client \u7684\u5e93\u3002<\/p>\n<p>\u53ef\u4ee5\u5b89\u88c5@nuxtjs\/apollo\u6a21\u5757\uff0c\u5b83\u53ef\u4ee5\u4f7fNuxt.js\u66f4\u52a0\u6613\u4e8e\u4f7f\u7528Apollo Client\u3002<\/p>\n<pre class=\"post-pre\"><code>$ yarn add @nuxtjs\/apollo\r\n<\/code><\/pre>\n<hr \/>\n<p>\u5b8c\u6210\u5f15\u5165\u4f9d\u8d56\u540e\uff0c\u60a8\u9700\u8981\u5728nuxt.config.js\u6587\u4ef6\u4e2d\u6dfb\u52a0\u914d\u7f6e\u3002<\/p>\n<p>\u5728\u201c~\/plugins\/apollo-auth.js\u201d\u6587\u4ef6\u4e2d\u6dfb\u52a0clientOptions\u7684\u5b9a\u4e49\u3002\u8bf7\u624b\u52a8\u521b\u5efa\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"nx\">modules<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"dl\">'<\/span><span class=\"s1\">@nuxtjs\/apollo<\/span><span class=\"dl\">'<\/span><span class=\"p\">],<\/span>\r\n  <span class=\"nx\">apollo<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"nl\">clientConfigs<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\r\n      <span class=\"na\">default<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">~\/plugins\/apollo-auth.js<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\r\n    <span class=\"p\">},<\/span>\r\n  <span class=\"p\">},<\/span>\r\n<\/code><\/pre>\n<p>\u70b9\u51fb\u63d2\u4ef6\/apollo-auth.js<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">export<\/span> <span class=\"k\">default<\/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=\"na\">httpEndpoint<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">https:\/\/graphql-pokemon2.vercel.app\/<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\r\n  <span class=\"p\">}<\/span>\r\n<span class=\"p\">}<\/span>\r\n<\/code><\/pre>\n<p>\u8fd9\u4e2aURL\u662fGraphQL Pokemon\u63a7\u5236\u53f0\u7684\u7f51\u5740\u3002<\/p>\n<h1>\u5199\u67e5\u8be2<\/h1>\n<p>\u5c06\u67e5\u8be2\u5185\u5bb9\u5199\u5165\u5230~\/apollo\/queries\/getPokemons.gql\u6587\u4ef6\u4e2d\u3002<\/p>\n<p>\u521b\u5efa\u4e00\u4e2a\u540d\u4e3aapollo\u7684\u6587\u4ef6\u5939<br \/>\n\u521b\u5efa\u4e00\u4e2a\u540d\u4e3aapollo\/queries\u7684\u6587\u4ef6\u5939<br \/>\n\u5728apollo\/queries\u4e2d\u521b\u5efa\u4e00\u4e2a\u540d\u4e3agetPokemons.gql\u7684\u6587\u4ef6<\/p>\n<pre class=\"post-pre\"><code>query GetPokes{\r\n  pokemons(first: 151){\r\n    number\r\n    image\r\n  }\r\n}\r\n<\/code><\/pre>\n<p>\u67e5\u8be2\u4e2d\u7684GetPokes\u662f\u6307\u4ec0\u4e48\uff1f<\/p>\n<p>\u5728\u67e5\u8be2\u4e2d\uff0c\u60a8\u53ef\u4ee5\u6307\u5b9a\u64cd\u4f5c\u7c7b\u578b\u548c\u64cd\u4f5c\u540d\u79f0\u3002<\/p>\n<blockquote><p>\u64cd\u4f5c\u7c7b\u578b<\/p>\n<p>\u8868\u793a\u6267\u884c\u7684\u64cd\u4f5c\u7c7b\u578b\uff08\u67e5\u8be2\u3001\u4fee\u6539\u3001\u8ba2\u9605\uff09<br \/>\n\u57fa\u672c\u5fc5\u9700\u3002<\/p>\n<p>\u64cd\u4f5c\u540d\u79f0<\/p>\n<p>\u660e\u786e\u6307\u793a\u67e5\u8be2\u6267\u884c\u7684\u64cd\u4f5c\u7684\u540d\u79f0<br \/>\n\u53ef\u9009\uff0c\u4f46\u63a8\u8350\u4f7f\u7528\uff0c\u4fbf\u4e8e\u8c03\u8bd5\u548c\u670d\u52a1\u5668\u7aef\u65e5\u5fd7\u6536\u96c6\u3002<\/p><\/blockquote>\n<hr \/>\n<p>\u8fd9\u6b21\u7684\u67e5\u8be2\u4ecepokemon\u53d8\u6210\u4e86pokemons\u3002<br \/>\n\u53c2\u6570\u4e5f\u4ecename\u53d8\u6210\u4e86first\uff0c\u5e76\u4e14\u73b0\u5728\u63a5\u53d7\u6570\u5b57\u4f5c\u4e3a\u8f93\u5165\u3002<\/p>\n<p>\u53ef\u4ee5\u5728GraphiQL\u9875\u9762\u53f3\u4fa7\u7684Doc\uff08\u6587\u6863\u8d44\u6e90\u6d4f\u89c8\u5668\uff09\u4e2d\u67e5\u770b\u53ef\u7528\u7684\u67e5\u8be2\u9009\u9879\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d820e913a08637a6aec50\/39-0.png\" alt=\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8 2021-03-17 4.56.00.png\" \/><\/div>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d820e913a08637a6aec50\/40-0.png\" alt=\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8 2021-03-17 4.57.04.png\" \/><\/div>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d820e913a08637a6aec50\/41-0.png\" alt=\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8 2021-03-17 5.12.18.png\" \/><\/div>\n<hr \/>\n<p>\u5c06\u5b57\u6bb5\u4e0e\u76f8\u5bf9\u5e94\u7684\u7c7b\u578b\u653e\u5165\u6a21\u5f0f\u4e2d\uff0c\u8fd9\u79cd\u63cf\u8ff0\u88ab\u79f0\u4e3a\u6a21\u5f0f\u3002<\/p>\n<blockquote><p>\u901a\u8fc7\u9075\u5faaGraphQL API\u89c4\u8303\u7684\u5b9a\u4e49\uff0c\u53ef\u4ee5\u6267\u884c\u67e5\u8be2\u4ee5\u83b7\u53d6\u6570\u636e\u3002<\/p><\/blockquote>\n<hr \/>\n<p>\u8ba9\u6211\u4eec\u5c06\u56de\u5e94\u663e\u793a\u5728\u6a21\u677f\u4e2d\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"nt\">&lt;<\/span><span class=\"k\">template<\/span><span class=\"nt\">&gt;<\/span>\r\n  <span class=\"nt\">&lt;div&gt;<\/span>\r\n    <span class=\"nt\">&lt;div<\/span> <span class=\"na\">v-for=<\/span><span class=\"s\">\"poke in pokemons\"<\/span> <span class=\"na\">:key=<\/span><span class=\"s\">\"poke.id\"<\/span><span class=\"nt\">&gt;<\/span>\r\n      <span class=\"si\">{{<\/span> <span class=\"nx\">poke<\/span><span class=\"p\">.<\/span><span class=\"nx\">number<\/span> <span class=\"si\">}}<\/span>\r\n      <span class=\"nt\">&lt;img<\/span> <span class=\"na\">width=<\/span><span class=\"s\">\"100\"<\/span> <span class=\"na\">height=<\/span><span class=\"s\">\"100\"<\/span> <span class=\"na\">:src=<\/span><span class=\"s\">\"poke.image\"<\/span> <span class=\"nt\">\/&gt;<\/span>\r\n    <span class=\"nt\">&lt;\/div&gt;<\/span>\r\n  <span class=\"nt\">&lt;\/div&gt;<\/span>\r\n<span class=\"nt\">&lt;\/<\/span><span class=\"k\">template<\/span><span class=\"nt\">&gt;<\/span>\r\n\r\n<span class=\"nt\">&lt;<\/span><span class=\"k\">script<\/span><span class=\"nt\">&gt;<\/span>\r\n<span class=\"k\">import<\/span> <span class=\"nx\">getPokes<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">~\/apollo\/queries\/getPokemons.gql<\/span><span class=\"dl\">'<\/span> <span class=\"c1\">\/\/ \u30fb\u30fb\u30fb\u2460<\/span>\r\n\r\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"p\">{<\/span>\r\n  <span class=\"nx\">data<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"k\">return<\/span> <span class=\"p\">{<\/span>\r\n      <span class=\"na\">pokemons<\/span><span class=\"p\">:<\/span> <span class=\"p\">[],<\/span> <span class=\"c1\">\/\/ \u30fb\u30fb\u30fb\u2462<\/span>\r\n    <span class=\"p\">}<\/span>\r\n  <span class=\"p\">},<\/span>\r\n  <span class=\"na\">apollo<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"na\">pokemons<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\r\n      <span class=\"na\">query<\/span><span class=\"p\">:<\/span> <span class=\"nx\">getPokes<\/span><span class=\"p\">,<\/span> <span class=\"c1\">\/\/ \u30fb\u30fb\u30fb\u2461<\/span>\r\n    <span class=\"p\">},<\/span>\r\n  <span class=\"p\">},<\/span>\r\n<span class=\"p\">}<\/span>\r\n<span class=\"nt\">&lt;\/<\/span><span class=\"k\">script<\/span><span class=\"nt\">&gt;<\/span>\r\n<\/code><\/pre>\n<blockquote><p>\u5c06\u6240\u8ff0\u67e5\u8be2\u5bfc\u5165\u3002<br \/>\n\u6dfb\u52a0apollo\u5bf9\u8c61\uff0c\u5e76\u5728\u5176\u4e2d\u5b9a\u4e49\u5c5e\u6027\u3002<br \/>\n\u5728data\u5c5e\u6027\u4e2d\u8bbe\u7f6e\u521d\u59cb\u503c\u3002\u521d\u59cb\u503c\u7684\u5b9a\u4e49\u5e94\u4e0e\u67e5\u8be2\u7684\u5b57\u6bb5\u5339\u914d\u3002<\/p><\/blockquote>\n<hr \/>\n<p>\u597d\u7684\uff0c\u8fd9\u6b21\u7684\u67e5\u8be2\u662f\u7528\u6765\u83b7\u53d6\u6307\u5b9a\u6570\u91cf\u7684\u5b9d\u53ef\u68a6\u4ee5\u53ca\u8fd9\u4e9b\u5b9d\u53ef\u68a6\u7684\u6570\u636e\u3002<br \/>\n\u6570\u636e\u5305\u62ec\u6570\u5b57\u548c\u56fe\u7247\u3002<\/p>\n<p>\u6211\u4f1a\u786e\u8ba4\u8868\u8fbe\u65b9\u5f0f\u3002<\/p>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d820e913a08637a6aec50\/52-0.png\" alt=\"\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8 2021-03-17 5.54.20.png\" \/><\/div>\n<p>\u5c0f\u7cbe\u9748\u5011\u6b63\u5728\u5c55\u793a\u4e2d\uff01<\/p>\n<p>\u5927\u5bb6\u4e00\u8d77\u6349\u8ff7\u85cf\u5b9d\u53ef\u68a6\u5427\uff01<\/p>\n<h1>\u8d60\u54c1<\/h1>\n<h3>\u4f7f\u7528\u53d8\u91cf<\/h3>\n<p>\u60a8\u53ef\u4ee5\u5728apollo\u5bf9\u8c61\u7684variables\u5c5e\u6027\u4e2d\u4f20\u9012\u53d8\u91cf\u7ed9\u67e5\u8be2\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"nx\">apollo<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"nl\">pokemons<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\r\n      <span class=\"na\">query<\/span><span class=\"p\">:<\/span> <span class=\"nx\">getPokes<\/span><span class=\"p\">,<\/span>\r\n      <span class=\"na\">variables<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"na\">num<\/span><span class=\"p\">:<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span>\r\n      <span class=\"p\">},<\/span>\r\n    <span class=\"p\">},<\/span>\r\n  <span class=\"p\">},<\/span>\r\n<\/code><\/pre>\n<pre class=\"post-pre\"><code>query GetPokes($num: Int!){\r\n  pokemons(first: $num){\r\n    number\r\n    image\r\n  }\r\n}\r\n<\/code><\/pre>\n<hr \/>\n<h3>\u5c06\u53d8\u91cf\u8bbe\u4e3a\u54cd\u5e94\u5f0f<\/h3>\n<p>\u901a\u8fc7\u5c06\u53d8\u91cf\u8f6c\u6362\u4e3a\u51fd\u6570\uff0c\u4f7f\u5176\u5177\u6709\u54cd\u5e94\u6027\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"nx\">apollo<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"nl\">pokemons<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\r\n      <span class=\"na\">query<\/span><span class=\"p\">:<\/span> <span class=\"nx\">getPokes<\/span><span class=\"p\">,<\/span>\r\n      <span class=\"nx\">variables<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"k\">return<\/span> <span class=\"p\">{<\/span>\r\n          <span class=\"na\">num<\/span><span class=\"p\">:<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">num<\/span><span class=\"p\">,<\/span>\r\n        <span class=\"p\">}<\/span>\r\n      <span class=\"p\">},<\/span>\r\n    <span class=\"p\">},<\/span>\r\n  <span class=\"p\">},<\/span>\r\n<\/code><\/pre>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d820e913a08637a6aec50\/64-0.com%2F442c1c7d5444e1337df00e113dbcb278%2Fraw\" alt=\"demo\" \/><\/div>\n<hr \/>\n<h3>\u8fd9\u662f\u6211\u4f7f\u7528\u7684$apollo\u3002<\/h3>\n<p>\u6211\u4e4b\u524d\u901a\u8fc7apollo\u5bf9\u8c61\u8bbf\u95eeapollo-client\u5b9e\u4f8b\u6765\u8fdb\u884c\u64cd\u4f5c\uff0c\u8fd9\u79cd\u65b9\u6cd5\u88ab\u79f0\u4e3aSmart Query\u3002<\/p>\n<p>\u8fd9\u6b21\u6211\u4eec\u5c06\u5c1d\u8bd5\u4f7f\u7528this.$apollo\u6765\u8bbf\u95eeapollo-client\u5b9e\u4f8b\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"k\">async<\/span> <span class=\"nx\">created<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\r\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">pokemons<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">$apollo<\/span><span class=\"p\">.<\/span><span class=\"nx\">query<\/span><span class=\"p\">({<\/span>\r\n      <span class=\"na\">query<\/span><span class=\"p\">:<\/span> <span class=\"nx\">getPokes2<\/span><span class=\"p\">,<\/span>\r\n      <span class=\"na\">variables<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\r\n        <span class=\"na\">num<\/span><span class=\"p\">:<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">num<\/span><span class=\"p\">,<\/span>\r\n      <span class=\"p\">},<\/span>\r\n    <span class=\"p\">})<\/span>\r\n  <span class=\"p\">},<\/span>\r\n<\/code><\/pre>\n<p>\u8fd9\u4e2a this.$apollo.query \u8fd4\u56de\u4e00\u4e2a Promise\u3002<\/p>\n<hr \/>\n<h3>\u52a0\u8f7d\u4e2d<\/h3>\n<p>\u4f60\u53ef\u4ee5\u901a\u8fc7\u4f7f\u7528 this.$apollo.loading \u6765\u68c0\u6d4b\u52a0\u8f7d\u72b6\u6001\u3002<\/p>\n<pre class=\"post-pre\"><code><span class=\"nt\">&lt;div<\/span> <span class=\"na\">v-if=<\/span><span class=\"s\">\"$apollo.loading\"<\/span><span class=\"nt\">&gt;<\/span>\u3061\u3087\u3063\u3068 \u307e\u3063\u3066\u306d<span class=\"nt\">&lt;\/div&gt;<\/span>\r\n<\/code><\/pre>\n<div><img decoding=\"async\" class=\"post-images\" title=\"\" src=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d820e913a08637a6aec50\/75-0.com%2Faac0c053e6048f79af6dd0e27aacde83%2Fraw\" alt=\"demo\" \/><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u6211\u5c06\u4f7f\u7528GraphQL Pokemon\u6765\u5b66\u4e60GraphQL\u3002 GraphQL\u662f\u4ec0\u4e48\uff1f GraphQL\u662f\u7531Fac [&hellip;]<\/p>\n","protected":false},"author":11,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-47911","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>\u3010Nuxt.js\u3011\u7528 Pok\u00e9mon \u6559\u4f60\u5b66\u4e60 GraphQL - 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\/\u3010nuxt-js\u3011\u7528-pokemon-\u6559\u4f60\u5b66\u4e60-graphql\u3002\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u3010Nuxt.js\u3011\u7528 Pok\u00e9mon \u6559\u4f60\u5b66\u4e60 GraphQL\" \/>\n<meta property=\"og:description\" content=\"\u6211\u5c06\u4f7f\u7528GraphQL Pokemon\u6765\u5b66\u4e60GraphQL\u3002 GraphQL\u662f\u4ec0\u4e48\uff1f GraphQL\u662f\u7531Fac [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/zh\/blog\/\u3010nuxt-js\u3011\u7528-pokemon-\u6559\u4f60\u5b66\u4e60-graphql\u3002\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-15T08:33:11+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-04T09:37:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d820e913a08637a6aec50\/10-0.com%2Fa9bf7ff8902597e92cce3e73620b0316%2Fraw\" \/>\n<meta name=\"author\" content=\"\u65b0, \u97f5\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u65b0, \u97f5\" \/>\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\/%e3%80%90nuxt-js%e3%80%91%e7%94%a8-pokemon-%e6%95%99%e4%bd%a0%e5%ad%a6%e4%b9%a0-graphql%e3%80%82\/\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90nuxt-js%e3%80%91%e7%94%a8-pokemon-%e6%95%99%e4%bd%a0%e5%ad%a6%e4%b9%a0-graphql%e3%80%82\/\",\"name\":\"\u3010Nuxt.js\u3011\u7528 Pok\u00e9mon \u6559\u4f60\u5b66\u4e60 GraphQL - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\"},\"datePublished\":\"2023-08-15T08:33:11+00:00\",\"dateModified\":\"2024-05-04T09:37:50+00:00\",\"author\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/4ba4019495123db3038fd0809e6959c9\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90nuxt-js%e3%80%91%e7%94%a8-pokemon-%e6%95%99%e4%bd%a0%e5%ad%a6%e4%b9%a0-graphql%e3%80%82\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90nuxt-js%e3%80%91%e7%94%a8-pokemon-%e6%95%99%e4%bd%a0%e5%ad%a6%e4%b9%a0-graphql%e3%80%82\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90nuxt-js%e3%80%91%e7%94%a8-pokemon-%e6%95%99%e4%bd%a0%e5%ad%a6%e4%b9%a0-graphql%e3%80%82\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.silicloud.com\/zh\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u3010Nuxt.js\u3011\u7528 Pok\u00e9mon \u6559\u4f60\u5b66\u4e60 GraphQL\"}]},{\"@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\/4ba4019495123db3038fd0809e6959c9\",\"name\":\"\u65b0, \u97f5\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d484b6c6e4ae82e8a9efea989e1d2af46d9b6ef128101e63b18f559fca0ae627?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d484b6c6e4ae82e8a9efea989e1d2af46d9b6ef128101e63b18f559fca0ae627?s=96&d=mm&r=g\",\"caption\":\"\u65b0, \u97f5\"},\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/author\/yunxin\/\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90nuxt-js%e3%80%91%e7%94%a8-pokemon-%e6%95%99%e4%bd%a0%e5%ad%a6%e4%b9%a0-graphql%e3%80%82\/#local-main-organization-logo\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Blog - Silicon Cloud\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u3010Nuxt.js\u3011\u7528 Pok\u00e9mon \u6559\u4f60\u5b66\u4e60 GraphQL - 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\/\u3010nuxt-js\u3011\u7528-pokemon-\u6559\u4f60\u5b66\u4e60-graphql\u3002\/","og_locale":"zh_CN","og_type":"article","og_title":"\u3010Nuxt.js\u3011\u7528 Pok\u00e9mon \u6559\u4f60\u5b66\u4e60 GraphQL","og_description":"\u6211\u5c06\u4f7f\u7528GraphQL Pokemon\u6765\u5b66\u4e60GraphQL\u3002 GraphQL\u662f\u4ec0\u4e48\uff1f GraphQL\u662f\u7531Fac [&hellip;]","og_url":"https:\/\/www.silicloud.com\/zh\/blog\/\u3010nuxt-js\u3011\u7528-pokemon-\u6559\u4f60\u5b66\u4e60-graphql\u3002\/","og_site_name":"Blog - Silicon Cloud","article_published_time":"2023-08-15T08:33:11+00:00","article_modified_time":"2024-05-04T09:37:50+00:00","og_image":[{"url":"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d820e913a08637a6aec50\/10-0.com%2Fa9bf7ff8902597e92cce3e73620b0316%2Fraw"}],"author":"\u65b0, \u97f5","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"\u65b0, \u97f5","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"2 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90nuxt-js%e3%80%91%e7%94%a8-pokemon-%e6%95%99%e4%bd%a0%e5%ad%a6%e4%b9%a0-graphql%e3%80%82\/","url":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90nuxt-js%e3%80%91%e7%94%a8-pokemon-%e6%95%99%e4%bd%a0%e5%ad%a6%e4%b9%a0-graphql%e3%80%82\/","name":"\u3010Nuxt.js\u3011\u7528 Pok\u00e9mon \u6559\u4f60\u5b66\u4e60 GraphQL - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website"},"datePublished":"2023-08-15T08:33:11+00:00","dateModified":"2024-05-04T09:37:50+00:00","author":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/4ba4019495123db3038fd0809e6959c9"},"breadcrumb":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90nuxt-js%e3%80%91%e7%94%a8-pokemon-%e6%95%99%e4%bd%a0%e5%ad%a6%e4%b9%a0-graphql%e3%80%82\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90nuxt-js%e3%80%91%e7%94%a8-pokemon-%e6%95%99%e4%bd%a0%e5%ad%a6%e4%b9%a0-graphql%e3%80%82\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90nuxt-js%e3%80%91%e7%94%a8-pokemon-%e6%95%99%e4%bd%a0%e5%ad%a6%e4%b9%a0-graphql%e3%80%82\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.silicloud.com\/zh\/blog\/"},{"@type":"ListItem","position":2,"name":"\u3010Nuxt.js\u3011\u7528 Pok\u00e9mon \u6559\u4f60\u5b66\u4e60 GraphQL"}]},{"@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\/4ba4019495123db3038fd0809e6959c9","name":"\u65b0, \u97f5","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d484b6c6e4ae82e8a9efea989e1d2af46d9b6ef128101e63b18f559fca0ae627?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d484b6c6e4ae82e8a9efea989e1d2af46d9b6ef128101e63b18f559fca0ae627?s=96&d=mm&r=g","caption":"\u65b0, \u97f5"},"url":"https:\/\/www.silicloud.com\/zh\/blog\/author\/yunxin\/"},{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e3%80%90nuxt-js%e3%80%91%e7%94%a8-pokemon-%e6%95%99%e4%bd%a0%e5%ad%a6%e4%b9%a0-graphql%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\/47911","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\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/comments?post=47911"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/47911\/revisions"}],"predecessor-version":[{"id":99732,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/47911\/revisions\/99732"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/media?parent=47911"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/categories?post=47911"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/tags?post=47911"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}