Kickstart your full stack GraphQL application with GRelDAL starter - I - Hashnode

April 17, 2019 0 Comments

Kickstart your full stack GraphQL application with GRelDAL starter - I - Hashnode

 

 

Building a GraphQL powered application today requires integrating many different utility libraries. It is not that there aren't good quality building blocks available for the Node.js ecosystem, it is just that it requires time and effort to integrate them into a full working solution.

For the past few months, we have been working an open source project GRelDAL which drastically simplifies the effort required in mapping relational databases to efficient and adaptable GraphQL APIs powered by Node.js.

Unlike many other solutions, when you build your API using GRelDAL you are not restricted to a single database, you don't overfetch what you don't need and you don't end up unnecessary Node ↔ Database roundtrips, or hierarchical or N+1 access patterns.

However, GRelDAL only serves a small piece of the puzzle in a full stack application. That is how it was meant to be. It was designed from the day one to integrate well with the wider GraphQL ecosystem so we don't end up re-inventing the wheel everywhere.

What this means is that though the small core of GRelDAL is easy to maintain and test for us, and we can stand on the shoulder of giants for a lot of other functionality, the users still have to do quite a bit of work when building an application with GRelDAL.

A pre-configured starter kit

To simplify this, we have created GRelDAL Starter which is a bare-bones application which you can use a starting point for a full-stack GraphQL based application powered by Node.js, React and GRelDAL.

While this starter application is quite a bit more opinionated than GRelDAL itself, it eliminates the need to spend hours integrating small utilities before you can get started with the application logic.

This starter kit follows a monorepo structure (managed using lerna), with two packages: frontend and backend, both written in TypeScript.

Getting Started

To quickly get started with GRelDAL starter, we can clone the repo and install dependencies.

git clone https://github.com/gql-dal/greldal-starter.git myapp --depth=1
cd myapp
yarn

The above assumes that yarn is installed, but if you prefer npm that is fine too. We prefer yarn because its workspaces feature integrates well with monorepos.

With npm, we need to run one more command after this:

npm run bootstrap

We will also need a postgres server running to connect to it. If you don't have postgres installed, check out the instructions here.

The application will try to connect to a database of name greldal_starter_development. You can change the DATABASE_URL entry in .env file to change this. Alternatively, you can also set an environment variable to configure this. We will later cover how to connect to a different database, but given the impeccable track record of Postgres on stability and versatility it is a great default choice for most common applications.

Next we run the migrations to setup the required tables:

cd packages/backend
yarn run migrate:latest

Migrations are a widely used approach for versioning changes to the database. In our case, we are leveraging the migration CLI provided by Knex, our underlying data access layer.

The starter kit comes with a few sample migrations in the packages/backend/src/migrations directory, so we have some tables to play around with.

We can also run the seeds to populate some sample data in our tables:

yarn run seed:run

Again, we are using the Seed CLI provided by Knex.

Now, we have some tables in place, as well as some data we can tinker with.

seed.PNG

Let us start our express server:

cd packags/backend
yarn run start

We will now have a GraphQL server running on localhost:4000.

We can now open http://localhost:4000/graphql in the browser and use the graphiql in-browser IDE to play around with the API.

GraphiQL IDE.

This is the same data that we see in the database explorer above, exposed through a GraphQL API.

In the next post in this series, we will explore more about the code behind this API.

Lets try out the client side application next.

The client resides in a separate directory, packages/frontend. We can run the dev-server for the client using a similar start script:

cd packages/frontend
yarn run start

Now when we open http://localhost:3000 in browser we should see a page like this:

Frontend Example

Scrolling down below, we will find a tiny example component that talks to our graphql API. )

Wizard Explorer Example Application

Now feel free to go and tinker with your code. On any change, both your server and client will reload and update automatically.

During development, the client dev-server will proxy to the GraphQL backend.

The next post in this series will explore more on the code that powers the application and what else GRelDAL is capable of.

While GRelDAL is still in beta, we have stopped making breaking changes to the API often, and almost all aspects are documented. We encourage you to try it out and are excited to see what you build with it.


Tag cloud