There are two parts to most web apps: the backend and the frontend. The backend is usually an API of some kind and the frontend is mobile and/or web apps built in React, Vue, Android, iOS, etc.
Super Graph will instantly give you a powerful and high-performance GraphQL API that can be your apps' backend. Let's get started, I promise you it's super easy and will save you weeks to months of your life.
For this example we will create a web e-commerce store. This example app can be found in repo. https://github.com/dosco/super-graph/tree/master/examples/webshop
Try the example app
Below we explain how this example app was built and other details around useing Super Graph to make you more productive.
Install Super Graph
Create the app
Let's call our app Webshop.
Add a database schema
Defines tables and database relationships
Be sure to define primary keys to all of your tables and to use foreign keys to define
relationships between tables. In the example below the products table has a foreign key relationhsip
user_id to the users table. It looks like this
user_id bigint REFERENCES users(id)
Create a seed script
If you don't plan to use it then delete the sample seed file
rm -rf config/seed.js
Setup the database
This will create the database, run the migrations and the seed file. Once it's set up to reset use the
db:reset command-line argument.
Start the Webshop API
Access the Super Graph UI
The Super Graph web UI is used to build and test queries. It supports auto-completion which makes it easy to craft queries. Open your web browser and visit the below url.
Fetch data with GraphQL
Validations can be added in the database schema -- this way nothing can bypass them and put invalid data into your database.
Full text search
Postgres has great full-text search built-in. There's no reason to complicate your setup by adding another service just for search. Enabling full-text search on a table requires you to add a single column (term-vector column) to it.
Implementing autocomplete does not need a
tsv column. Instead, columns that you'd like to be used with autocomplete need an extra index
of the type
Now use the below query and set the
$prefix variable to the entered text value you want
to autocomplete on.
Using GraphQL fragments
Some of you unfamiliar with GraphQL might wonder what
...Product is in the code above. It's called a fragment. Fragments save you from having to retype the same set of columns all over.
Most GraphQL clients like
urql have a way to manage fragments and share then
across your queries.
Fetch the discuessions about a product
Create new product
The following GraphQL query and variables together will insert a new product into the database. The
connect keyword will find a user whose
5 and set the
user_id field on the product to that user's id.
Update a product
This will update a product with
id = 12 and change its
Create a user, product with tags and categories
There is so much going on here. We are creating a user, his product and assigning some tags and categories. Tags here means a simple text array column while categories refers to a bigint array column that we have configured to act as a foreign key to the categories tables.
Since array columns cannot be foreign keys in Postgres we have to add a simple config to Super Graph to set this up.
This is one of the coolest features of Super Graph. It is a highly scalable way to get updates from the database as it updates. Below we use subscriptions to fetch the latest
purchases from the database.
Production secrets management
We recommend you use Mozilla SOPS for secrets management. The sops binary is installed on the Super Graph app docker image. To use SOPS you create a yaml file with your secrets like the one below. You then need a secret key to encrypt it. Your options are to go with Google Cloud KMS, Amazon KMS, Azure Key Vault, etc. In production SOPS will automatically fetch the key from your defined KMS, decrypt the secrets file and make the values available to Super Graph via enviroment variables.
- Create the secrets file
- Login to your cloud (Google Example)
- Encrypt the secrets with the key