AWS Amplify Release, GraphQL, and Recent Curated Links

This release kicked off this week in time for re:Invent and I put together a quick write up. Any questions, feel free to ping me via my contact form or better yet, just pop a question at me via the Twitters @Adron.

Authenticator

Amplify’s new Authenticator

Docs here

The new authenticator is a component that adds a full authentication flow for your app with coordinated boilerplate. This covers vue.js, angular, and react frameworks. The component has a customizable UI (as you’d expect), includes social logins for Google, Facebook, Apple, and Amazon. The initial setup is zero-configuration, and does have password manager support, along with show/hide confirm password forms.

The zero configuration works based on your Amplify CLI setup. To use this component grab the latest version of Amplify 6.4.0.

npm

npm install -g @aws-amplify/cli@latest

yarn

yarn global add @aws-amplify/cli@latest

Once that runs it will update your aws-exports.js with the latest backend configuration for the Authenticator. So, zero configuration you have to add, but there’s configuration back there if you need to or want to dig in.

There is then an initial state for the component that sets a user up for sign in, sign up, or resetting their password. You might start with some code to get the component in your page like this.

export default function App() {
  return (
    <Authenticator>
      {({ signOut, user }) => (
        <main>
          <h1>Hello {user.username}</h1>
          <button onClick={signOut}>Sign out</button>
        </main>
      )}
    </Authenticator>
  );
}

Then to set the initial state add the following parameter.

export default function App() {
  return (
    <Authenticator initialState="signUp">
      {({ signOut, user }) => (
        <main>
          <h1>Hello {user.username}</h1>
          <button onClick={signOut}>Sign out</button>
        </main>
      )}
    </Authenticator>
  );
}

Setting many of the other options to your needs includes adding additional parameters to the Authenticator component like;

Social providers

export default function App() {
  return (
    <Authenticator socialProviders={['amazon', 'apple', 'facebook', 'google']}>
      {({ signOut, user }) => (
        <main>
          <h1>Hello {user.username}</h1>
          <button onClick={signOut}>Sign out</button>
        </main>
      )}
    </Authenticator>
  );
}

Sign up attributes

export default function App() {
  return (
    <Authenticator signUpAttributes={[]}>
      {({ signOut, user }) => (
        <main>
          <h1>Hello {user.username}</h1>
          <button onClick={signOut}>Sign out</button>
        </main>
      )}
    </Authenticator>
  );
}

Login mechanisms

export default function App() {
  return (
    <Authenticator loginMechanisms={['username']}>
      {({ signOut, user }) => (
        <main>
          <h1>Hello {user.username}</h1>
          <button onClick={signOut}>Sign out</button>
        </main>
      )}
    </Authenticator>
  );
}

There are lots of other features too, give the docs a quick read for the full details. For more details on the overall authentication worflow check out these docs.

In-App Messaging

In App Messaging

This library is, sadly for my vue.js app, only available for react native. A quick install will get you started.

npm install -E aws-amplify@in-app-messaging aws-amplify-react-native@in-app-messaging amazon-cognito-identity-js @react-native-community/netinfo @react-native-async-storage/async-storage @react-native-picker/picker react-native-get-random-values react-native-url-polyfill

Then install pod dependencies for iOS.

pod install

An example looks like this.

import 'react-native-get-random-values';
import 'react-native-url-polyfill/auto';

import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';

AppRegistry.registerComponent(appName, () => App);

Then import the awsconfig vis aws.exports.js.

import Amplify from 'aws-amplify';
import awsconfig from './src/aws-exports';

Amplify.configure(awsconfig);

Then integrate the Amplify React Native UI component if your app’s root component.

import {
  InAppMessagingProvider,
  InAppMessageDisplay
} from 'aws-amplify-react-native';

const App = () => (
  <InAppMessagingProvider>
    {/* Your application */}
    <InAppMessageDisplay />
  </InAppMessagingProvider>
);

re: from the docs, here’s an app.jsx example.

import React, { useEffect } from 'react';
import { SafeAreaView, Button } from 'react-native';
import { Analytics, Notifications } from 'aws-amplify';
import {
  InAppMessagingProvider,
  InAppMessageDisplay
} from 'aws-amplify-react-native';

const { InAppMessaging } = Notifications;

// To display your in-app message, make sure this event name matches one you created
// in an In-App Messaging campaign!
const myFirstEvent = { name: 'my_first_event' };

const App = () => {
  useEffect(() => {
    // Messages from your campaigns need to be synced from the backend before they
    // can be displayed. You can trigger this anywhere in your app. Here we are
    // syncing just once when this component (your app) renders for the first time.
    InAppMessaging.syncMessages();
  }, []);

  return (
    <SafeAreaView>
      <InAppMessagingProvider>
        {/* This button has an example of an analytics event triggering the in-app message. */}
        <Button
          onPress={() => {
            Analytics.record(myFirstEvent);
          }}
          title="Record Analytics Event"
        />

        {/* This button has an example of an In-app Messaging event triggering the in-app message.*/}
        <Button
          onPress={() => {
            InAppMessaging.dispatchEvent(myFirstEvent);
          }}
          title="Send In-App Messaging Event"
        />

        <InAppMessageDisplay />
      </InAppMessagingProvider>
    </SafeAreaView>
  );
};

export default App;
In App Messaging

Custom Resources w/ AWS CDK or Cloudformation

René (@renebrandel) wrote a blog post on extending the Amplify backend with custom AWS resources using AWS CDK or CloudFormation. The post is avilable here but I’ll give you a quick summary.

The new CLI comand amplify add custom will get almost any of the AWS services added to an Amplify backend. The core tech here is backed with AWS Cloud Development Kit (CDK) or CloudFormation. For example if you want to pull in AWS SNS as custom resource, this is a very quick and concise way to do just that.

Again, check out René’s post to really get into it and check out some of the possibilities.

Overriding Amplify Backend Resources with CDK

Amplify sets up various capabilities out of the box in many situations such as project-level IAM roles, Cognito Auth, or S3 resources. As with the previous section, this one I’ll keep short as René (@renebrandel) has wrote a great blog post about this capability too titled “Override Amplify-generated backend resources using CDK“. If you’re interesting in nixing (overriding) any of these features and using another choice, this is your go to.

Prototype a Fullstack App without an AWS Account

Not specifically related to the release, this capability that Christian Nwamba AKA Codebeast wrote up in a blog post will show you how to do just that. The docs focused around what he details in the post are avilable here.

GraphQL Transformer v2

This I saved for last, it’s in my wheelhouse after all. Some of the features of the new v2 drop include; deny-by-default auth, lambda authorizer, customizable pipeline resolvers, and OpenSearch aggregations and use-scoped queries. The accomplished blogger, as mentioned in this very blog post, blogging legend René continues with “AWS Amplify announces the new GraphQL Transformer v2. More feature-rich, flexible, and extensible.“.

The first thing René brings up in the post is more explicit data modeling. I’ve stolen two of the screen shots from that post as examples and motivation to click through and check out the post. But I’ll also elaborate.

Adding primary and secondary indexes.

With the new explicit data modeling options, we’ve got @primaryKey and @index added as directoves to configure primary and secondary indexes from schema for your Dynamo Database. The directives in AppSync GraphQL really makes for a powerful schema definition capability to push via code first or to map from database to GraphQL scehma.

Adding relational directives.

The other part that is hugely important is the ability in schema to draw relationships that add referential integrity to your schema and the inherent data. There are now @hasOne, @hasMany, @belongsTo, and @manyToMany directives. I’m really looking forward to some data schema and modeling build outs in the near future. I’ll be sure to put together some tutorials and content detailing some of the design considerations and where and how to get all the schema hacks working best for your particular app data builds.

Thanks & Curated Follows

That’s it for this post. I’m always endeavoring to bring interesting tech and blog about it, but another way to get the quickest updates, links, details, and information about these releases is to follow the following people in the Twittersphere. They’re all in the cohort I run with at AWS with the Amplify team. I owe thanks to each for helping me find the following information and details included in this blog entry.

Farewell!

Big changes coming up for me in the coming weeks and months, but in this moment I want to dedicate this post to a giant, huge, magnificent farewell to the absolutely stellar crew at Hasura! This has, without question, been one of my favorite companies to work for and their mission has been extremely enjoyable to help further! A huge shout out to Rajoshi and Tanmai (they’re the awesome co-founders!) for bringing me on board to help advocate for more GraphQL goodness and Postgres + SQL Server + GraphQL successes!

Cheers to all and thanks for a great time!

No worries either, I’ll keep in touch with you all and ALL y’all Hasurians know where I am! Here on the ole’ blog, on the email(s), the Twitch streams, or on ole’ Twitter (@Adron) itself!

…and as always, stay tuned (i.e. subscribe to the blog, or the Twitch stream, or Twitter) as my adventure continues, I’ll share all the gory details right here!

A parting shout out, if you’re using GraphQL, and into a Postgres + SQL Server instant GraphQL option, absolutely check out Hasura’s tech. It is seriously impressive!

That ends my #100DaysOfCode && AMA with Hasura’s GraphQL!

Splitting a Postgres Timestamp with Generated Columns & GraphQL Query with Hasura

Recently I created a video short on how to split out a timestamp column for Hasura. This included the SQL for Postgres via a schema migration and also details on how this appears in the Hasura user interface. You can check out the video here.

The break out of what I show in the video is available in a Github repository also.

https://github.com/Adron/graphql-relational-concept-mapping

Postgres Table Creation SQL

Here is the specific database query that creates the table with the timestamp being broken out to the year, month, and day as generated column data.

create table standard_relational_model.users_data
(
    user_id uuid PRIMARY KEY,
    address_id uuid,
    signup_date timestamp DEFAULT now(),
    year int  GENERATED ALWAYS AS (date_part('year', signup_date)) STORED,
    month int  GENERATED ALWAYS AS (date_part('month', signup_date)) STORED,
    day int  GENERATED ALWAYS AS (date_part('day', signup_date)) STORED,
    points int,
    details jsonb
);

In this SQL the signup_date column is the timestamp column that I want split out to year, month, and day. I’ve set it up with a default function call of now() just to seed the column and not require entry when inserting a new row. With that seed, then the generated columns of year, month, and day use the date_part() function to extract the particular value out of the signup_date column and store it in the respective column.

The other columns are just there for other references.

The Hasura Console

In the Hasura Console those columns would look something like this.

Notice the syntax displayed for these is different than the migration that created them.

date_part('day'::text, signup_date)

The above of course is for day, and each respective part is designated by month, year, etc.

When the data is added to the table the results return as follow with GraphQL and results.

GraphQL

The query.

query MyQuery {
   users_data {
    signup_date
    year
    month
    day
  }
}

The results.

{
  "data": {
    "users_data": [
      {
        "signup_date": "1999-04-21T00:00:00",
        "year": 1999,
        "month": 4,
        "day": 21
      },
    
            ... etc ...
            
      {
        "signup_date": "2007-01-02T00:00:00",
        "year": 2007,
        "month": 1,
        "day": 2
      },
      {
        "signup_date": "2021-06-29T00:09:48.359247",
        "year": 2021,
        "month": 6,
        "day": 29
      }
    ]
  }
}

SQL

The query.

select signup_date, year, month, day
from standard_relational_model.users_data;

The results.

1999-04-21 00:00:00.000000,1999,4,21
2012-07-04 00:00:00.000000,2012,7,4
2019-06-24 00:00:00.000000,2019,6,24
2013-03-07 00:00:00.000000,2013,3,7
2007-01-02 00:00:00.000000,2007,1,2
2021-06-29 00:09:48.359247,2021,6,29

That is how to build generated columns in Postgres and how they’re available via Hasura to expose via GraphQL!

Coding Effort Introspection, 2nd Quarter Workshops, Code Sessions, & Twitch Streaming Schedule

I began learning Vue.js with sincerity a few months ago. But I also started several other #100DaysOfCode efforts (Database Dev Work and GraphQL Design & Dev) at the same time. This, in hindsight wasn’t the best idea. Since I was going to work on some of the #100DaysOfCode tracks outside of my regular day’s workload tackling multiple language stacks, even with the experience and familiarity I have with so many existing stacks it didn’t put me in a position to succeed.

But I digress, even in failure lessons have been learned and I’ll be beginning new with a different plan just next week. Hopefully, not only will this plan work better, but it could tangibly be of much better use for anybody that would want to learn these things too!

With that, I present, the new plan!

Starting on the week 27th I’ll start streaming on Wednesday at 5pm Pacific on Thrashing Code. On the Hasura HQ Channel I’ll be streaming on Tuesday at 9am Pacific and Thursday at 9pm Pacific, scheduling on two time points to cover more of the globe. Instead of daily hour long segments, these will likely go on for a few hours and it’ll be easier to join, ask questions, hang out, chat, and all the things that make a stream entertaining and useful. The lagniappe of this schedule will allow me to more easily cut shorter segments for those that will find those useful, but can’t really join for the longer session. It’ll be a win win for me and the audience.

Thrashing Code Guests

On the 14th of July, Russell Spitzer will be joining me to talk about tech stack, dev environment, and very likely a few things about ole’ New Orleans! Join us for that conversation and let’s dig into all the topics!

The Music of Thrashing Code

The music streams, alas, are again pushed further into the future. I’ve decided I’m going to put together a little bit more before I start streaming that, plus I’d like to get a little bit more into practice before shredding live on stream. For your sake and mine! 🤘🏻

To join in on live sessions;

Aside from the regularly scheduled things above, I’ve scheduled some workshops again as people found those useful. These workshops I’ve scheduled below. It is important to note that these are in addition to the workshops I will provide in the coming weeks and months through Hasura.

  • Getting Started with Hasura GraphQL API and Postgres (Click for tickets)
    • Short introduction to GraphQL
    • Server
    • Client
    • Architectural Overview of Hasura API Server and Tooling
    • Instant GraphQL API
    • CLI Tooling
    • Building a GraphQL Schema with the Hasura Console
    • Database Schema (vs GraphQL)
    • Tables
    • Data Types
    • Relationships
    • Overview of Migrations
    • Using Postgres Functions
    • Short identifiers
    • Default columns (functions & triggers)
  • Full Migrations, Metadata, and Seeds Workflow with Hasura(Click for tickets)
    • Migrations
    • Setup for migrations workflow
    • Versioning migrations.
    • Metadata
    • Setup metadata for workflow
    • Versioning metadata
    • Seeds
    • Setup seeds for initial data loads
    • Versioning seeds
    • Peripheral Workflow Tools & Practices
    • Docker & Local Database Environment
    • Additional Tooling
      • Visual Studio Code
      • JetBrains DataGrip
      • JetBrains Database Plugin
      • Postgres pgAdmin
      • SQL Server Enterprise Manager

Future Workshops

Quick Link to Poll for Priority: https://docs.google.com/forms/d/e/1FAIpQLSdrxPEjPqDLn8GhG1pVOvrhMXP_0LEBqiJirIOUsLkQWA1_jw/viewform?usp=sf_link

Finally, a little help from you dear readers, below I’ve added a poll of several presentations and workshops that I’d like to give in the coming months and would like to get your suggestions on prioritization – i.e. which would the most of you find useful for me to focus on first?

  • SQL Coding (Click to vote) – An introduction to SQL coding. Covering the following material:
    • Introduction to what SQL is and the history. Including, why it’s pronounced sequal, not S, Q, L, and that it does not stand for “Standard Query Language” because nerds are funny about their naming of things, and naming is hard!
    • The basic structure of SQL statements. How they’re built from object, predicate, and verb formation.
    • Putting together a database with SQL. Including creating a database, schema, table, columns, and how to alter these elements.
    • How to go about editing and dropping the elements we created.
    • A quick overview of database migrations.
    • Query writing, joins, inner and outter, and the deluge of Cartesian products.
  • Data Modeling with Relational Databases (Click to vote) – A dive into the 3rd normal form, and the normalization and denormalization of data, including nuanced tips n’ tricks to types and modeling.
    • Basic data modeling, normal forms, and the implications of building schema around normalized forms.
    • Denormalizing schema.
    • Data types and their usage around data modeling.
    • Data types and their implications within data modeling.
    • Common tips n’ tricks for using data types to build effective normalized or denormalized schema.
  • Advanced SQL Coding(Click to vote) – Going beyond the introduction material and delving into the depths of query writing, batch processing, transactions, and other advanced features of SQL.
    • Writing a basic query and growing this complexity to advanced joins, views, and query options to make data available.
    • Getting Cartesian products and ensuring we don’t.
    • Denormalizing data with SQL and some of the complexities of doing so once you have data, and especially with lots of data.
    • Writing loops in SQL and why not to do this.
    • Other SQL tips n’ tricks to awesome SQL coding!
  • GraphQL Servers (Click to vote) – Need a custom GraphQL server? Not sure where to start? In this workshop I’ll provide an introduction to writing GraphQL Servers. Somewhat a language agnostic workshop, but I will pick one to implement a server in for reference in the workshop. Ideally we’ll pick one before the workshop and I’ll use it based on what the students in the workshop would prefer.
    • Introduction to GraphQL Servers and what they do and how they work.
    • Elements of a GraphQL Server
    • Schema
    • Data Set
    • Resolvers
    • Query Operations
    • GraphQL Types
    • Aliases and Fragments
    • Variables
    • Query Nested Objects
    • Directives
  • GraphQL Clients (Click to vote) – This workshop assumes you’ve got your GraphQL Server all setup and ready for use. Now we just need to ensure our clients are getting, and using the data from the server effectively.
    • Client options for the various languages stacks; JavaScript, C#, Java, Go, and possibly other languages.
    • Implementation of queries and mutations in;
    • JavaScript via client and Node.js Server calls (server acting as client).
    • C# and/or Java calls as clients.
    • Go calls as systems client.
    • How to deal with JSON results with JavaScript, C#, Java, and Go.
    • JavaScript with JavaScript Object Notation.
    • C#/Java options for managing JSON.
    • Go options for managing JSON.

Next Week is Hasura Conf 2021

Next week is Hasura Con 2021, which you can register here, and just attend instead of reading any further. But if you want some reasons to attend, read on, I’ll provide a few in this blog entry!

First Reason – What Have People Built w/ Hasura

You’re curious to learn about what is implemented with Hasura’s API and tooling. We’ve got several people that will be talking about what they’ve built with Hasura, including;

Second Reason – Curious About GraphQL

You’re still curious about GraphQL but haven’t really delved into what it is or what it can do. This is a chance, for just a little of our time, to check out some of the features and capabilities in specific detail. The following are a few talks I’d suggest, to get an idea of around what GraphQL can do and what various aspects of it provides.

Third Reason – Minimal Time, Maximum Benefit

Attending the conference, which is online, will only require whatever amount of time you’d like to put into it! There’s no cost, registration is free, so join for the talks you want or even join me for one of the topic tables or workshops that I’ll be hosting and teaching!

Hope to see you in the chat rooms! If you’ve got any questions feel free to reach out and ask me, my DMs are open on Twitter @Adron and you can always just leave a comment here too!