by Siddhant Srivastav

通过Siddhant Srivastav

如何开始使用Angular-Hasura样板 (How to get started with Angular-Hasura Boilerplates)

This blogpost gives you an idea of how to start with GraphQL with the help of Hasura and Angular. I will give you information about the boilerplate apps on Angular configured to use with Hasura’s deployed GraphQL engine on Heroku.

该博客文章为您提供了在Hasura和Angular的帮助下如何从GraphQL开始的想法。 我将为您提供有关Angular上样板应用程序的信息，这些样板应用程序配置为与Heroku上Hasura部署的GraphQL引擎一起使用。

The idea behind this article is to give you a push into the process of creating the app and an idea about the approach used for it. We won’t be getting into the code a lot, just the part we need to get the app up and running.

本文的目的是让您深入了解应用程序的创建过程以及有关使用该方法的想法。 我们不会花很多时间去编写代码，而只是使应用程序启动和运行所需的部分。

Let’s dig in!

让我们开始吧！

总览 (Overview)

We have 3 genres of boilerplates:

我们提供3种样板：

你好，世界 (hello-world)

This boilerplate is just an Angular application which has the settings for GraphQL and headers already setup. Using this boilerplate, you can directly clone the app and start creating your app!

这个样板只是一个Angular应用程序，它具有GraphQL的设置和已设置的标题。 使用此样板，您可以直接克隆该应用程序并开始创建您的应用程序！

基本的 (basic)

This boilerplate is build upon the hello-world boilerplate and introduces the basic functionalities of mutation/queries and shows you how you write them and the functions that use them.

该样板是在hello-world样板的基础上构建的，它介绍了变异/查询的基本功能，并向您展示了如何编写它们以及使用它们的功能。

高级 (advanced)

This boilerplate is build on the basic app and is fully fledged with mutations, queries and authentication with Auth0 already setup! This boilerplate is an ideal app for you to get started and create new apps in absolutely no time.

该样板是在基本应用程序的基础上构建的，并且已充分利用已设置的Auth0进行突变，查询和身份验证！ 该样板是您理想的应用程序，它使您立即开始创建新应用程序。

哇！ 停止！ 重要的东西在这里... (Woah! Stop! Important stuff here…)

To use these boilerplates, there are some important settings required. Here they are:

要使用这些样板，需要进行一些重要的设置。 他们来了：

• Create an instance at Heroku. To do that go to https://hasura.io

  在Heroku中创建一个实例。 为此，请访问https://hasura.io

• Set up the environment variables: Head over to the file environments/environment.ts and change the values for the endpoint and other required fields. In the advanced application, you’ll need to use the credentials provided by Auth0.

  设置环境变量：转到文件environments/environment.ts并更改端点和其他必填字段的值。 在高级应用程序中，您将需要使用Auth0提供的凭据。

样板 (The Boilerplates)

The three boilerplates that allow Angular to interact with Hasura’s GraphQL engine can be cloned from the Hasura engine repo. Steps common for all the three boilerplates are:

可以从Hasura引擎存储库中克隆允许Angular与Hasura的GraphQL引擎交互的三个样板。 这三个样板的通用步骤是：

• Clone the app.
  克隆应用程序。

• cd <boilerplate-name> and

  cd <boilerplate-na me>和

• run npm install to install all the dependencies.

  运行npm install以安装所有依赖项。

你好，世界 (Hello World)

The hello-world boilerplate is nothing but a simple Angular application with the GraphQL module setup and with the apollo client already set up as well.The directory structure for the applicatio is shown below.

hello-world样板文件不过是一个简单的Angular应用程序，该应用程序具有GraphQL模块设置以及Apollo客户端也已设置。该应用程序的目录结构如下所示。

The hello world application has a hello module that imports the graph-ql.module.ts . Forming this directory structure helps us initialise the GraphQL Module once the Hello Module is activated.

hello world应用程序具有一个hello模块，该模块导入graph-ql.module.ts 。 激活Hello模块后，形成此目录结构有助于我们初始化GraphQL模块。

But why do we need to do this? The GraphQL Module initialises the headers and creates an Apollo Client. The headers contain authorisation tokens and other information. We want to initialise this Module only when the authorization tokens are set, else we’d need to refresh the application one more time for set the values for tokens in the module. This pattern is followed in all the boilerplates.

但是为什么我们需要这样做呢？ GraphQL模块初始化标题并创建Apollo客户端。 标头包含授权令牌和其他信息。 我们只想在设置了授权令牌时初始化此模块，否则我们将需要刷新一次应用程序以设置模块中令牌的值。 所有样板均遵循此模式。

The Hello Module is activated from the App Module.

Hello模块已从应用模块激活。

Now let’s get to know the GraphQL Module better. This module is the same throughout the three boilerplates with some minor adjustments for the tokens.

现在让我们更好地了解GraphQL模块。 在三个样板中，此模块都是相同的，但对令牌进行了一些小的调整。

基本应用 (The Basic App)

The Basic App boilerplate is built on top of the Hello World boilerplate. The additions to the app are the queries and mutations written to give you examples of how queries and mutations are written.

Basic App样板构建在Hello World样板之上。 该应用程序的新增功能是编写查询和变异，以提供有关如何编写查询和变异的示例。

The queries are written in app/shared/operations.ts . The Shared Module is imported to the Basic Module with contains HTML and functions written to make queries.

查询写在app/shared/operations.ts 。 共享模块导入到基本模块中，其中包含HTML和编写用于进行查询的函数。

In the basic app, the login is handled by a mock authenticator that sets a hard-coded session and lets you login with any username and password.

在基本应用程序中，登录由模拟身份验证器处理，该身份验证器设置了硬编码会话，并允许您使用任何用户名和密码登录。

高级样板 (The Advanced Boilerplate)

This boilerplate is built upon the Basic boilerplate and adds the feature of authentication to the application.

该样板是在基本样板的基础上构建的，并向应用程序添加了身份验证功能。

Authenticaion via Auth0

通过Auth0进行身份验证

• Head over to https://auth0.com and sign in.

  转到https://auth0.com并登录。

• Once logged in, create a new app and get the credentials for the app.
  登录后，创建一个新应用并获取该应用的凭据。

• Open settings for the app and add a callback url. For development: use the url http://localhost:4200, and for production use the url of your website.

  打开应用程序的设置，然后添加一个回调URL。 对于开发：使用URL http：// localhost：4200 ，对于生产使用您网站的URL。

Now head over to the environments/environment.prod.ts and replace the environment variables. You are now ready to use the advanced boilerplate!

现在转到environments/environment.prod.ts并替换环境变量。 现在您可以使用高级样板了！

编码愉快！ (Happy Coding!)

关于我 (About Me)

My name is Siddhant Srivastav, and I’m an undergrad student at the Indian Institute of Information Technology, Allahabad.

我叫Siddhant Srivastav ，我是阿拉哈巴德 印度 信息技术学院的一名本科生。

I love creating. I love to code in Python and JS. I love Open source and contributing in projects I find interesting.

我喜欢创造。 我喜欢用Python和JS编写代码。 我喜欢开源，并为我发现有趣的项目做贡献。

You can follow me on LinkedIn, Twitter and GitHub.

您可以在LinkedIn ， Twitter和GitHub上关注我。

翻译自: https://www.freecodecamp.org/news/todo-boilerplates-with-hasura-on-angular-460db0040b4a/