如何将GraphQL API连接到VueJS前端

如何将您的GraphQL API连接到VueJS前端
*最近我写了一篇关于如何使用Hasura的GraphQL引擎创建API的博文。如果您对此不熟悉…*medium.com

我最近在写一篇关于如何使用Hasura的GraphQL引擎创建API的博客文章。如果你还不熟悉GraphQL，我建议你先阅读这篇文章。接下来，让我们学习如何创建一个非常简单的Vue应用程序，并将其连接到GraphQL API上。

如果在创建Vue应用程序的过程中有任何疑问或想看到完整的解决方案，您随时可以在Github上查看该项目。

目录
创建Vue项目
电影列表组件
电影详情组件
添加Movie组件
连接到GraphQL API
从GraphQL API获取实际数据
电影列表
添加电影
接下来怎么办？
加入社区讨论

创建一个Vue项目。

vue create harry-potter-app

选择默认预设，并在您喜欢的编辑器中打开项目。为了使应用程序外观更加清晰，我们将添加Milligram库到index.html中。

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">

<link rel="stylesheet" href="//cdn.rawgit.com/necolas/normalize.css/master/normalize.css">

<link rel="stylesheet" href="//cdn.rawgit.com/milligram/milligram/master/dist/milligram.min.css">

在终端中转到项目路径，并输入以下命令在本地执行应用程序。

就纱线而言：

yarn serve

对于Npm来说

npm run serve

会显示Vue的标志以及Vue的Hello World页面。

根据之前创建的Harry Potter API，我们看到有几个表，包括movies、characters、actors和scenes。我们在Vue应用程序中想要做的是创建一个电影组件。最后，我们需要一个列表组件，由多个表示单个电影的组件组成。我们还会创建一个允许添加电影的组件。

电影列表组件

让我们开始吧。首先，在App.vue文件中注册MovieList组件。在文件内部，我们需要替换组件。这是因为我们还没有注册新的组件。在组件列表的同一个文件的稍下面，我们要从正确的位置导入已更名的组件，并将HelloWorld组件替换为MoviesList组件。完成后，将会如下所示。

那么，我们需要将HelloWorld.vue文件的名称更改为MoviesList.vue。在文件内部，需要将和