Vue配置GraphQLAPI的方法

本篇内容介绍了“ Vue 配置 GraphQL API的方法”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

成都创新互联专注于网站建设|网页维护|优化|托管以及网络推广，积累了大量的网站设计与制作经验，为许多企业提供了网站定制设计服务，案例作品覆盖成都混凝土搅拌罐等行业。能根据企业所处的行业与销售的产品，结合品牌形象的塑造，量身策划品质网站。

先创建一个 Vue 项目

执行下面的命令，就可以创建并启动一个 Vue 的 hello-world 项目：

vue create hello-world  cd hello-world npm run serve

默认情况下，服务将监听 localhost 的 8080 端口，浏览器访问 http://localhost:8080 就会看到 Vue 框架渲染的网页。

注意第一步执行 vue create hello-world 时我们选择默认的 Vue2， Vue3 是 2020 年 09 月 18 日发布的，我在使用 Vue3 时后面生成样例代码那一步报错了，这里暂时用 Vue2 吧，让 Vue3 再飞一会儿。

如果你还没有用过 Vue，请去官方网站[1]学习一下。

使用 Vue Apollo

Vue Apollo[2] 是一个三方库，可以让你在 Vue 的应用中使用 GraphQL，使用起来也很轻松，在上述 hello-world 目录下，也就是 package.json 同级的目录下，打开命令窗口执行：

vue add apollo

这个命令会自动安装 npm 包：graphql graphql-tag @apollo/client。除此之外会让你选择是否生成代码，是否配置相关的 API，如下图所示：

这里只选择生成样例代码即可，其他都选否。生成样例代码的好处是我们不需要关心配置信息，集中精力放在业务逻辑即可。

生成样例代码后，我们先修改配置文件，将 graphql 的接口对接 Django 的 url。也就是修改文件配置文件 vue-apollo.js 的 httpEndpoint， 修改后的 httpEndpoint 如下所示：

const httpEndpoint = process.env.VUE_APP_GRAPHQL_HTTP || 'http://127.0.0.1:8000/graphql/'

然后参考 hello-world/graphql 目录内的其他文件，新建文件 CookbookCategory.gql，内容就是之前 Django 里面的 graphql 的查询语句，因为需要传入参数，这里外层做了一下封装，不要问为啥这样写，这是 apollo 规定好了的，我们只需要比葫芦画瓢，如下：

query categoryByName($name: String!) {   categoryByName(name: $name) {     id     name     ingredients {       id       name     }   } }

接下来就是让前端调用这个查询，并展示数据了。

前端展示

修改文件：hello-world/src/components/ApolloExample.vue

删除多余的部分，只保留一个文本框和展示数据的部分，修改后的最终结果如下所示：