Kickstart your full stack GraphQL application with GRelDAL starter - I
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.
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 my_app --depth=1 cd my_app yarn
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
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.
Let us start our express server:
cd packags/backend yarn run start
We will now have a GraphQL server running on
We can now open
http://localhost:4000/graphql in the browser and use the graphiql in-browser IDE to play around with the API.
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 side application
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:
Scrolling down below, we will find a tiny example component that talks to our graphql API. )
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.