Hypi is an ultra-flexible community-driven app development platform. You can use Hypi with any front-end framework of choice like Angular, React, Vue js, native frameworks etc. Hypi is designed from the ground up to make it easy to build scalable data-driven applications, web services and components that fetch data with GraphQL and REST easily. To get started and for demonstration purposes, we are going to integrate Hypi with Angular. You can incorporate Hypi with any other framework.
Here are some things you should consider:
- Incrementally adaptable— you can drop Hypi into an existing app and start using GraphQL for just part of your UI or web services.
- Universally compatible— Hypi works with any setup, any front-end framework, and any web services.
- Easy to start with— you can start shaping and fetching your data right away and learn about advanced features later.
- Inspectable and understandable— GraphQL introspection system is often useful to get information about what queries a schema supports. You can run introspection on your API using other tools like https://graphql-code-generator.com/ to understand precisely what is happening in your app.
These docs will help you to go from getting started with Hypi to becoming an expert!
Things you'll need:
- Instance API domain — copy or create a instance API domain in Hypi
- Auth token — copy your auth token from the developer hub
- Apollo Angular — add apollo angular
Let’s get started with setting up an Angular project. The easiest way to do so is to use Angular CLI. If Angular CLI is not available on your system yet you first need to follow the instructions on https://cli.angular.io/ to install the Command Line Interface. Once it is installed successfully you can use the ng command to initiate a new project:
Change into the newly created project directory
and start up the live-reloading development web server by executing the following command:
In order to use Apollo Client for Angular we need to add a few packages to our project. Execute the following command within the Angular project directory:
@apollo/client— Apollo's core
apollo-angular— Bridge between Angular and Apollo Client
graphql— Most important package
@apollo/client package requires
AsyncIterable so make sure your tsconfig.base.json includes
Great, now that you have all the dependencies you need, let's create you a
graphql.module.ts file; in here you will setup Apollo and connect to Hypi. Remember to import the
graphql.module.ts file into the
Take a closer look what we did there:
HttpLinkservice we connect our client to Hypi
- We set our
uri``const uri = 'https://api.hypi.app/graphql/';
setContextwe added our
How easy was that! Now your client and Hypi are connected. The server can use that header to authenticate the user and modify any behavior based on a user's role and permissions.
Once all is hooked up, you're ready to start requesting data using Hypi! We will show you how easy it is to fetch data from your instance API, you can use the Apollo query method. It is as easy as this:
Generate a profile component using angular CLI
Great! well done for making this for! let's take a look back:
- Created our
Instancedomain in Hypi
angular CLIand set our project up
Apollo clientand connected to your Hypi app's instance domain
- Made a request to your instance's domain
Setting up and connecting to Hypi is very easy. We are excited to see what you build next. Checkout the CRUD section of documentation, so you get familiar with the operations you can run against your APIs.