DEV Community: Marion Schleifer

OSS @Hasura: August Digest

Marion Schleifer — Tue, 25 Aug 2020 08:23:50 +0000

OSS at Hasura

At Hasura we 💜 open source contributions. We want to make the experience of contributing as smooth as possible. In our monthly digest we inform about issues that can be easily picked up and that will be especially beneficial for the Hasura community. We’re doing our best to make sure that all required information is provided, but should there be any issues, you can always reach out for help.

This month, we have the following issues:

Hasura server (Haskell)

We have recently changed our internal server architecture with our famous PDV (Parse, don't validate) refactor.

This codeflow shows how GraphQL queries are executed in the PDV model. It might be a good resource to read before contributing to the Hasura server.

As for server issues, we have the following open ones that are suitable for OSS contributions:

Setting up the dev environment for the server

Check out the contributing guide for information on how to set up the development environment for the Hasura server.

Hasura CLI (Go)

Add command to reset migrations

We'd like to add a command that clears the history of the migrations on the server and clear the local migrations, as described in this issue.

If you're interested in working on this issue, please comment on the issue.

Setting up the dev environment for the CLI

Check out the contributing guide for information on how to set up the development environment for the Hasura CLI.

Hasura console (TypeScript & React)

Adding code snippets to GraphiQL code exporter

We're very excited that we've already had some contributions to add code snippets to the GraphiQL code exporter.

We'd like to add more code snippets, as described in this issue. Those code snippets can be in any language or frameworks. You can comment on the issue telling us in which language / framework you'd like to add a code snippet for, to avoid duplicate work.

Migrating from JavaScript to TypeScript

We are so excited that so far we've had almost 40 PRs from the open source community that helped us migrating our Hasura console from JavaScript to Typescript 🙏🏼

There are still a lot of modules left to be migrated. If you're interested, check out this issue. If you'd like to work on a module or if you have any questions, please comment on the issue.

Setting up the dev environment for the console

To find instructions about the local development setup, head to the contributing guide for the Hasura console.

Learn tutorials

You might be familiar with our Hasura Learn Tutorials. We're looking for full-stack devs who can help us build our new JAMstack Learn series for the following frameworks:

Gatsby.js
Next.js
Nuxt.js

Writing quality tutorials is an elaborate task and we pay our contributors for it. If you're someone who likes writing tutorials and building web apps with any of the above frameworks, you can reach out to Praveen at praveen@hasura.io.

Need help?

If you have questions about contributing or if something is not clear, please comment on the issue you'd like to work on. Alternatively, you can join our Discord channel and ask on the #contrib channel.

Community call

Join our community call on the 27th of August where we’ll talk about some of these issues in more detail. We’ll also announce some amazing new features, so don’t miss it! Check out the full agenda here and register for the call here. We hope to see you there! 🙌🏼

Previous digests

OSS @Hasura: July Digest

Marion Schleifer — Wed, 22 Jul 2020 16:44:33 +0000

This month, we have the following issues:

Hasura CLI

Add command to reset migrations

We'd like to add a command that clears the history of the migrations on the server and clear the local migrations, as described in this issue.

If you're interested in working on this issue, please comment on the issue.

Check out the contributing guide for information on how to set up the development environment for the Hasura CLI.

Hasura Console

Adding code snippets to GraphiQL code exporter

We'd like to add more code snippets to the GraphiQL code exporter, as described in this issue. Those code snippets can be in any language or frameworks.

Migrating from JavaScript to TypeScript

We are so excited that so far we've had over 30 PRs from the open source community that helped us migrating our Hasura console from JavaScript to Typescript 🙏🏼

There are still a lot of modules left to be migrated. If you're interested, check out this issue. If you'd like to work on a module or if you have any questions, please comment on the issue.

Setting up the dev environment for the console

To find instructions about the local development setup, head to the contributing guide for the Hasura console.

Learn tutorials

You might be familiar with our Hasura learn tutorials. We're looking to add a few courses around the JAMStack series:

Gatsby.js
Next.js
Nuxt.js

Since writing these tutorials are quite elaborate tasks, we'll pay the contributors. If you're interested, please get in touch with Praveen (praveen@hasura.io).

Need help?

Community call

Join our community call on the 23rd of July where we’ll talk about some of these issues in more detail. We’ll also announce some amazing new features, so don’t miss it! Check out the full agenda here and register for the call here. We hope to see you there! 🙌🏼

Previous digests

April
May

OSS @Hasura: May Digest

Marion Schleifer — Mon, 25 May 2020 14:18:49 +0000

This month, we have the following issues:

Migrating from JavaScript to TypeScript

We are so excited that so far we've had over 30 PRs from the open source community that helped us migrating our Hasura console from JavaScript to Typescript 🙏🏼

There are still a lot of modules left to be migrated. If you're interested, check out this issue. If you'd like to work on a module or if you have any questions, please comment on the issue. To find instructions about the local development setup, head to the contributing guide for the Hasura console.

Actions codegen

Actions are a way of extending your GraphQL schema with custom business logic using custom queries and mutations.

We keep adding new codegens for actions. So far, we have codegen for the following frameworks:

nodejs-express
nodejs-zeit
typescript-zeit
nodejs-Azure-function
go-serve-mux
javascript-js-doc-express
kotlin-http4k
kotlin-ktor
python-fast-api
python-flask
ruby-rails
typescript-express
java-spring-boot

We want to have codegen for all the frameworks out there and we'd love your help in adding more! 🔥

This issue lists frameworks that we're particularly interested in. In this README you can find detailed instructions on how to contribute to Hasura codegen.

If you'd like to implement one of these, please comment on the issue so that we and everyone else knows what frameworks are currently being worked on.

Server contributions

If you're excited about Haskell contributions, we have a few open Hasura server issues. To get an overview of the Hasura server architecture, check out this guide. If you want to work on an issue, please comment on the issue. We are particularly excited about any Haskell contributions! 🙌🏼

Learn tutorials

We continuously add to our Learn tutorials. Currently we have the following groups of tutorials:

Introduction to GraphQL
Hasura Backend tutorial
Frontend tutorials

There are a few tasks that we'd love to have your help with:

If you're interested in working on one of these, please comment on the respective issue. Questions are also welcome :)

Need help?

Community call

Join our community call on the 27th of May where we’ll talk about some of these issues in more detail. We’ll also announce some amazing new features, so don’t miss it! Check out the full agenda here and register for the call here. We hope to see you there! 🙌🏼

OSS @Hasura: April Digest

Marion Schleifer — Mon, 27 Apr 2020 18:24:56 +0000

At Hasura we 💜 open source contributions. We want to make the experience of contributing as smooth as possible. Therefore, we’re publishing a monthly digest with issues that can be easily picked up and that will be especially beneficial for the Hasura community. We’re doing our best to make sure that all required information is provided, but should there be any issues, you can always reach out for help.

This month, we have the following issues:

Migrating from JavaScript to TypeScript

Component: Console
Languages: JavaScript / TypeScript
GitHub issue

We’ve recently started migrating from JavaScript to TypeScript. We’d love for you to help us with this migration. In the issue, you can expand the following section to see the specific modules you can work on:

Please see our README for the Hasura console to get your development environment set up.

Hasura actions

We’ve recently launched Hasura actions. Actions are a way of extending the Hasura schema with custom business logic. Actions can be used for a variety of use cases, such as data validation, data enrichment and any other type of complex business logic. You can find more details and examples in the documentation. Also, we have a demo video showcasing actions in action :)

Actions codegen

Component: Community
Language: Open
GitHub issue

Hasura actions come with codegen that allows you to create actions more easily. We already have codegen for nodejs-express, nodejs-zeit and many more. All existing codegens can be found in this repository.

Currently open programming languages / frameworks are:

nodejs-lamda
nodejs-azure-function
nodejs-gcf
typescript-azure
python3-lambda
python3-azure
python3-gcf
python3-django
ruby-lambda
ruby-rails
ruby-sinatra
java8-azure
java8-lambda
golang-lambda
golang-gcf

If you’d like to work on one of these, just comment on the issue and let us know. Also, if you need help with the setup, get in touch and we’ll be happy to jump on a call.

If you’d like to contribute with a programming language or framework that is not on the list, that’s totally fine! Just comment on the issue, so that others know what you’re working on. :)

Actions examples

Component: Community
Language: Open
GitHub issue 1, GitHub issue 2

We have a GitHub repository with various use cases and examples on how to use actions. And we’re looking for some more of those, specifically:

If you can think of an action example that we haven’t covered yet, feel free to go ahead and open a pull request. We’re happy about any contributions!

More issues

Didn’t find what you were looking for? If you would like to check out more issues, feel free to browse the list here.

Need help?

If something is not clear or you need help with something, please comment on the issue you’d like to work on or join our Discord server (post in the #contrib channel). The community and the team will be happy to help out.

Community call

Join our community call on the 29th of April where we’ll talk about some of these issues in more detail - especially actions codegen. We’ll also announce some amazing new features, so don’t miss it! Check out the full agenda here and register for the call here. We hope to see you there! 🙌🏼

GraphQL & serverless Ruby

Marion Schleifer — Mon, 03 Jun 2019 13:25:18 +0000

As GraphQL and serverless are becoming more popular, we will check out how to build such an application with serverless Ruby. The option proposed in this post is to use a simple GraphQL backend with a modern frontend framework (e.g. Vue or React) and use serverless Ruby to add custom business logic.

3factor app architecture

The proposed architecture in this blogpost is to use the 3factor app architecture (https://3factor.app/). We use Hasura for the realtime GraphQL and reliable eventing, and AWS lambdas for async serverless. To set up your GraphQL backend, read this tutorial: https://medium.com/@marion.schleifer/beginners-guide-to-graphql-api-d5ec68c69f69. In this post, we will focus on how to add serverless business logic on AWS using Ruby. The frontend integration is not covered in this, but you can read up on it here: https://medium.com/@marion.schleifer/how-to-connect-your-graphql-api-to-your-vuejs-frontend-61d8e8e455db.

Serverless functions

Serverless functions is code that runs in the cloud. We will use them together with Hasura event triggers. In the Hasura project, we can add event triggers that invoke a serverless function after a mutation (insert, update, delete). This can for example be used to do things like sending an email, adding a payment API or processing async business logic. With a serverless architecture, we get the following advantages:

No infrastructure management

If you run your code in the cloud, the responsibility for maintenance relies with the cloud provider which allows you to focus on the frontend without worrying about maintaining a server.

Cost efficiency

With all modern cloud providers, you can start for free. When you start to get more traffic, the costs are designed to scale. This means that you pay based on how many times your serverless functions are triggered.

Reliability

You can count on the cloud providers to make sure there are no (or only very short) down times. The common cloud providers are huge corporations that have built a gigantic infrastructure around their cloud services, and they ensure uptime.

Cloud providers

You can deploy your serverless functions to any cloud provider. Those that are most commonly used in combination with Hasura are the following:

Glitch (simple, free, only JavaScript, best for prototyping)
Google Cloud (Google, cost at scale, several languages)
Azure (Microsoft, cost at scale, several languages)
AWS (Amazon, cost at scale, several languages including Ruby)

Our task

In our Harry Potter API (https://medium.com/@marion.schleifer/beginners-guide-to-graphql-api-d5ec68c69f69), we have a movies table. We now want to write a serverless function that gets triggered when a new movie is inserted. All this function will do is send the title and the release date back to the server where we will inspect it. Let’s go ahead and get started.

Creating our first serverless function

As AWS is the only cloud provider that supports Ruby at this time, we’ll go with this one, because we all love Ruby, right? First, create an account on AWS if you don’t already have one. The first year will be free, so you don’t have to worry about costs, as long as you don’t have a huge amount of traffic on your functions.

After logging in, go to the AWS Management Console and click on “Lambda”.

Now click on the button to create a new function:

As we don’t have blueprints or existing repositories yet, we will author our function from scratch. Below, you can enter your function name (no spaces and small letters). We will call our function “movie_inserted” because we want it to be triggered whenever a new movie is inserted. As for the runtime, there is one Ruby version to choose from, and we will select “Ruby 2.5”.

Now click on the button “Create function”. As you can see on the next page, our function was created:

When you scroll down, you can see the definition for our first AWS function.

Inside the function, we want to read the movie information out of the event that is passed to the function. Then, we want to send the title and the release date from the newly inserted movie back to the server.

Let’s change the function to the following:

On the top right side, click the Save button.

Now we have a function, but we need to have an endpoint that can be called for the function to run. Let’s add an API Gateway:

When we scroll down, we can configure our trigger:

We will create a new API because we don’t have any existing ones yet. And we’ll have an open endpoint. In a real life project, you would have stronger authentication, for example with an access token. But we’ll keep it simple for now. When you added the trigger, you can save it on the top right corner.

Once saved, you can see that an endpoint for the function invocation will be provided. Let’s copy this URL to the clipboard.

Adding an event trigger

Now it’s time to add an event trigger in our Hasura project that will be invoked whenever we insert a new movie. Open your API with the Hasura console and click on “Events” in the menu. On this page you find links to the documentation for serverless functions with different cloud providers that work with Hasura.

Next, we’ll add all the trigger information. Our trigger name is “movie_inserted”, like on AWS. The table is public and our database table that we want to trigger is the movies table. Also, we want the trigger to go off only when a new movie is inserted. Under “Webhook URL”, we paste the URL that we copied before on AWS. When we have all that, we can click on “Add Event Trigger”.

Let’s test this!

Now we want to test if this all works. In the Hasura console, let’s add a new movie.

When we now click on “Events”, we see that it worked:

We can now expand the event and see under “Request” what is sent from Hasura to our cloud function. From there, we know the structure of the event and how to read out the information in the previous part. Under “Response”, we can see what is actually sent back to the server.

As we can see, it’s exactly the title and the release date from the movie that we just created. So the function works. Good job!

Remote schemas

Maybe you have an existing GraphQL API / service and you want to use a Hasura project on top of it. No problem! Hasura has you covered. It has the ability to merge remote GraphQL schemas and provide a unified GraphQL API. You can write new custom GraphQL resolvers in any language which can then be merged into Hasura. All you need to do is provide an API endpoint to Hasura to stitch the two GraphQL services together. This allows you to make all your API calls from one point. Let’s check out how to do this:

On the “Remote Schemas” tab, click on “Add” to add your existing GraphQL service.

Enter the name of your remote schema.
Insert the URL, so that you can access your Hasura API from your linked GraphQL service.
If you have additional headers (e.g. for authorization), you can insert them here.

When you are done, you can make requests to your remote server from your Hasura GraphQL API.

For more documentation on serverless functions, event triggers and remote schemas, read more on the Hasura documentation page:

Trigger webhooks on database events | Hasura GraphQL Engine

https://docs.hasura.io/1.0/graphql/manual/event-triggers/index.html

Remote schemas | Hasura 1.0 documentation

Join the community

Hasura is being used by a growing number of developers. Join the friendly community and keep up with updates.

If you want to start building your own projects with Hasura, you can join their discord channel here: https://discordapp.com/invite/hasura. There is already a pretty large community and you will get help very quickly.

🐦 Twitter: https://twitter.com/hasurahq

⭐️ Github: https://github.com/hasura/graphql-engine

Beginner’s Guide to GraphQL API

Marion Schleifer — Fri, 08 Mar 2019 09:14:10 +0000

Today, I want to show you how to build serverless backends with the Hasura GraphQL API. After looking at GraphQL and its advantages, we will learn how to create new tables for our API. Next, we want to fill our database with real data. Of course, we want to have relationships between our tables. Finally, we will learn how to manipulate the data using mutations. No previous knowledge of GraphQL is required to follow this tutorial.

About GraphQL

GraphQL is a typed query language for APIs. More and more tech companies, including tech giants like Facebook, Twitter and GitHub, are switching from common REST apis to GraphQL solutions. The main advantages of GraphQL over other API architectures like REST are:

Get the exact data you need with easily understandable queries
Get reliable results and helpful error messages
Fast and lightweight applications because the data is accessed directly instead of through a server
Get several resources with one query without using several URLs and chaining resources
Use one endpoint for all data and typed fields for correct data access
Add GraphQL easily to your existing applications

Here is a sample query:

And its corresponding result:

As you can see, the query is very intuitive and the result is predictable. You get exactly what you ask for: not more and not less.

As web applications tend to get more complex, there is a growing need for fast and easily maintainable solutions. So this is probably a good time to have a glimpse at GraphQL. But how do we use it? Do I need to build my own server? How can we connect it to our frontend? Don’t worry, we’ll get there.

About Hasura

Hasura provides you with an open source GraphQL engine that runs in a Docker container. Hasura connects to the Postgres database that is created with the project. You can also run Hasura GraphQL on top of an existing project. This can in particular be useful if you want to migrate to GraphQL, as it allows you to do the migration in smaller steps.

There are several options as to where you can deploy your GraphQL API: Heroku, Docker, Digital Ocean, Azure, AWS and Google Cloud.

Creating a project

In this post, we will get started with Heroku. We are going to create a Harry Potter api 🤓

https://dashboard.heroku.com/new?button-url=https%3A%2F%2Fdocs.hasura.io%2F1.0%2Fgraphql%2Fmanual%2Fgetting-started%2Fheroku-simple.html&template=https%3A%2F%2Fgithub.com%2Fhasura%2Fgraphql-engine-heroku

On the dashboard, choose a (unique) name for your api and click the “Deploy” button:

That was easy, right? Now, if you scroll to the bottom you will see this:

When you click on “View”, the Hasura console will open in the GraphiQL tool, which is also one of the features that makes your life with GraphQL super easy. In the Hasura console, you can create tables and test queries. Let’s have a quick look at the console:

This is the (only) endpoint used to interact with the api. When we later poll data from external services, this is the URL we need to access. And yes, you’ve seen correctly: requests to GraphQL are always POST requests.
Here, you can add request headers. If you want to add authentication (e.g. with JWT tokens) later, you can add the headers here.
This is the field where you can test queries.
Here, the results will be displayed.
We will go there next, to create our first table.

Create tables

We first want to create a table to store movies. Let’s do that!

Name of the table.
It is recommended to add an ID to all tables. You can use an Integer or UUID. We’ll use UUID. Because we don’t want to pass an ID every time we create an object, Hasura offers a method to create it automatically.
Adding more fields.
We need to define the primary key for each table. This will be our ID.

Create the following two tables:

characters (id: UUID, name: Text, hair_color: Text, house: Text, wizard: Boolean, birth_year: Integer, patronus: Text)

actors (id: UUID, name: Text, birth_year: Integer, awards: Integer)

Insert data

Let’s add some data data:

Add one other character, as well as two movies and two actors.

Queries

Now that we have some data, we can make our first query in GraphiQL.

It will return the two characters that we have already inserted into our characters table.

There are a lot of different constraints you can add to your queries. For example, you can make sure only to get a certain number of objects. Or only get the objects where a certain condition is true. All this is very well documented by Hasura: https://docs.hasura.io/1.0/graphql/manual/queries/simple-object-queries.html. You can read through it and tweak your queries, so that they return different results. You might have to add some more data in order to do so.

Relationships

Currently, we have three tables that are all independent from each other. With a query, we can retrieve movies, characters and actors. But we cannot retrieve the movies with their characters and in turn the respective actors. In order to do this, we need to define relationships.

There are two different types of relationships: the object relationship and the array relationship. The object relationship is a one-to-one relationship. For example, a character has a single nested resource that is called actor. The array relationship is a one-to-many relationship. For example, a movie will have an array of nested resources called scenes.

Object relationship

Let’s first model the relationship between characters and actors. The first step is to add a actor_id to the characters table:

After adding the column, we need to edit it and to make sure that the actor_id is actually a foreign key, pointing to the actors table.

When we go to the tab “Relationships” on characters, a suggested relationship will appear. That’s right — Hasura detects foreign keys automatically and makes suggestions regarding relationships. As a name, we’ll take “actor”.

Next, we want to connect the characters with the corresponding actors in our database. When we now look into the characters table, we can see that the actor_id for the previously created characters is NULL. We can now edit the data and add the ids of the actors that correspond to these characters.

Now the characters and their actors are linked. Now we can access fields from the actors along with the characters in the same query:

Array relationship

The array relationship is a one-to-many relationship. This means that one object of a table can have several objects of another table. Let’s say in our example, one movie can have several scenes and each scene belongs to one movie. A scene has an id, a name, a location and a movie_id. So let’s create a new table called “scenes” to our database:

Great! Now, just like we did before, we need to modify the table and make the movie_id a foreign key:

When we now go to the movies table and click on “Relationships”, we can see the suggested array relationship for scenes. Let’s add this relationship and call it “scenes”. This is all that is necessary to create an array relationship. To test it, insert some rows into the scenes table.

Many-to-many relationship

As explained before, the array relationship is a one-to-many relationship. However, in our case of movies and characters, we have a many-to-many relationship. One movie can have several characters and one character can appear in several movies. For this scenario, we need to create a join table that we will call “movie_characters” in which we can store the relationship between one movie and one character. Let’s create the “movie_characters” table that has an ID, a movie_id and a character_id.

From the perspective of the movie_characters table, we need object relationships to both the movies table and the characters table. This is because in each movie_character, there is one movie and one character stored.

Like above, edit both the movie_id and the character_id on the movie_character table and tick the checkbox for them to be foreign keys. Then add the correct reference table and the reference column. For the movie_id, the reference table is movies and for the character_id, the reference table is characters. For both reference columns, it will be ID.

When you now click the tab “Relationships”, you’ll see two suggestions for object relationships. Add them both and call them “movie” and “character”. Once added, it should look like this:

Of course, like above, we need to create the relationships with our data. Create new rows in the movie_characters table for each movie — character relationship, using their IDs.

Yayy, now all our tables are modelled with their correct relationships. Let’s test it with a query.

Isn’t this neat? With just one query, we are able to access several resources with those fields we want. Compared to REST where usually the whole object is returned, we can reduce the query to the essentials. This makes the API more efficient, more lightweight and easier to handle.

Mutations

So far, we learned how to get data from our API. But what about adding new data? In our case, we might want to add a movie or a character. For this, we need mutations. Mutations are easy to use with the GraphQL API and just like queries, we can try them in the Hasura console:

Let me explain what is happening here. Inside a mutation, we can call different methods like insert, update or delete on the resources that we store in our database. In our case, we want to insert a new movie. We need to pass the movies as objects and it is possible to insert several objects in one mutation. In the end, we need to return something, which is the ID of the newly created object in our example.

Again, there is full documentation on mutations on the Hasura website: https://docs.hasura.io/1.0/graphql/manual/mutations/index.html. Go through the examples and try some other mutations, like deleting a movie.

That is it for now. I hope you had fun learning about GraphQL and that you are eager to extend your Harry Potter API with lots of new tables and data. If something is not clear, you can always send me an email at marion.schleifer@gmail.com or message me over Twitter: https://twitter.com/rubydwarf.

Stay tuned for updates. I will soon publish another blogpost on how to connect your Hasura backend to your VueJS frontend 🎉

Join the community

Hasura is being used by a growing number of developers. Join the friendly community and keep up with updates.

🐦 Twitter: https://twitter.com/hasurahq

⭐️ Github: https://github.com/hasura/graphql-engine

DEV Community: Marion Schleifer

OSS @Hasura: August Digest

OSS at Hasura

Hasura server (Haskell)

Setting up the dev environment for the server

Hasura CLI (Go)

Add command to reset migrations

Setting up the dev environment for the CLI

Hasura console (TypeScript & React)

Adding code snippets to GraphiQL code exporter

Migrating from JavaScript to TypeScript

Setting up the dev environment for the console

Learn tutorials

Need help?

Community call

Previous digests

OSS @Hasura: July Digest

Hasura CLI

Add command to reset migrations

Hasura Console

Adding code snippets to GraphiQL code exporter

Migrating from JavaScript to TypeScript

Setting up the dev environment for the console

Learn tutorials

Need help?

Community call

Previous digests

OSS @Hasura: May Digest

Migrating from JavaScript to TypeScript

Actions codegen

Server contributions

Learn tutorials

Need help?

Community call

OSS @Hasura: April Digest

Migrating from JavaScript to TypeScript

Hasura actions

Actions codegen

Actions examples

More issues

Need help?

Community call

GraphQL & serverless Ruby

Table of Contents

3factor app architecture

Serverless functions

No infrastructure management

Cost efficiency

Reliability

Cloud providers

Our task

Creating our first serverless function

Adding an event trigger

Let’s test this!

Remote schemas

Join the community

Beginner’s Guide to GraphQL API

Table of Contents

About GraphQL

About Hasura

Creating a project

Create tables

Insert data

Queries

Relationships

Object relationship

Array relationship

Many-to-many relationship

Mutations

Join the community