TutorialsCourses

Code Daily

Modern JavaScript for web and mobile

Start Learning Now

Latest Courses

Hasura For Beginners
React Navigation for Beginners
Formik for Beginners
See all courses...

Latest Screens

Create a Recipe Difficulty Component
React Native
Create a Recipe Difficulty Component
react nativecomponentrecipe
Build a Recipe Caloric Display
React Native
Build a Recipe Caloric Display
recipesreact nativecomponent
Animated Color Palette Generator in React Native
React Native
Animated Color Palette Generator in React Native
reactreact-nativeanimatedhookshooksanimatedreact native
Create an Animated Product Review Display with React Native
React Native
Create an Animated Product Review Display with React Native
reactreact-nativereviewanimated

Latest Tutorials

Secure Hasura Actions when Deployed Publicly
Jason BrownJason Brown

Securing your action endpoints can come in many flavors. We will walk through how to use a shared event secret that is added as a header to every request. Your action code will need to have the same secret, and check the request header. It's a simple, and effective way to verify every request is coming from your Hasura instance.

hasura
HasuraHasura
Setup Hasura with Remote Schema Joins to Return Signed S3 Urls
Jason BrownJason Brown

We're going to walk through setting up a small GraphQL schema, that will receive an s3 file path and then generate an s3 signed url. Then we'll add it as a remote schema into Hasura, and show how to set up a remote join so that the signed url can be seamlessly stitched into your fetching of data from your Hasura setup.

hasuras3remote schemaaws
HasuraHasura
Test Hasura With Jest and Github Action Services
Jason BrownJason Brown

For complete test coverage within Hasura you should test the crucial pathways that rely on complex permissions, and also rely on features of Postgres. We test this using Jest, and running our Hasura Instance on Github Actions using services.

hasuragithubjesttesting
HasuraHasura
Setup Hasura with GraphQL Code Generator
Jason BrownJason Brown

Graphql Code Generator allows you to automatically generate TypeScript types, Apollo Hooks, and even backend GraphQL Requests for your Node server. We'll setup graphql-code-generator to generate everything you need to have completely typed queries, mutations, and resulting data in your Hasura application. We'll wrap up by showing how to do it on a per-role permission for better types that match your permissions.

HasuraGraphQLGraphQL Code Gen
HasuraHasura
How to Setup a Computed Field in Hasura
Jason BrownJason Brown

Hasura allows for the addition of "computed fields" to any table. Computed fields are SQL functions that get added to that tables schema definition. This allows for increased flexibility in querying, and ordering. We will setup a computed field to add a users post count to the user schema, and show how to query and sort by the new computed field.

hasuracomputed fieldssql
HasuraHasura
Setup Auth0 Authentication in Hasura
Jason BrownJason Brown

Hasura can work with any authentication method that can produce a JWT with custom claims. We will explore setting up Auth0, then configuring Hasura to allow it to authenticate our users. Finally we'll modify Auth0 to allow for adding in necessary roles, and claims to identify your user.

hasuraauth0authentication
HasuraHasura
Setup a Local Hasura Development Environment
Jason BrownJason Brown

We'll walk through using docker-compose to run Hasura and Postgres containerized. Then we'll create a Hasura project using the Hasura CLI. Finally we'll add in a database URL using environment variables using the multiple database connection ability with Hasura.

hasuradocker-compose
HasuraHasura
Focus on the Next TextInput when Next Keyboard Button is Pressed in React Native
Jason BrownJason Brown

We will use a combination of refs, onSubmitEditing callback, returnKeyType, and blurOnSubmit to move between text inputs when submitted. This will allow us to control exactly what input to move to while avoiding keyboard thrashing.

React NativeReact Native
Creating Animated Rings with React Native Reanimated
Jason BrownJason Brown

Use React Native Reaniamted and useEffect to create expanding rings. We'll leverage useSharedValue, useAnimatedStyle, withDelay, withRepeat, and use interpolation to achieve our animated expanding ring effect.

react-nativereanimated
React NativeReact Native
Use Before Insert Postgres Triggers as SQL Column Presets with Hasura
Jason BrownJason Brown

Column Presets sometimes aren't enough in Hasura. We will create a Postgres trigger function that can use hasura session variables to run SQL queries. Combined with BEFORE INSERT triggers we can effectively use SQL queries for column presets.

hasurapostgresfunctionstriggerscolumn presets
HasuraHasura
See all tutorials...