graphql-bff-example

An example of how to use graphql as a bff

Motivation

I wanted to build a sample graphql application to demonstrate the usage of the graphql technology as a backend-for-frontend(bff). BFF help in reducing overfetching at the client layer.

BFFs are built separately for different client device types. There can be different BFFs for desktop devices, mobile devices etc. This way, different clients can query for data specifically optimized to their device type.

I have built only one generic BFF in this demo- this demo can be extended to multiple BFFs too. Also, I have optimized the application by reducing graphql overfetching. I have used the @skip directive to generate dynamic graphql queries on the frontend. I have also optimized the graphql resolvers to not wastefully call any external API endpoint, if the client query doesn't need any data from them.

Project setup

Client setup

• Install the necessary dependencies for the client

#  cd path/to/graphql-bff-example/client
$ yarn install

• Create the .env file and fill in the required values

$ cp -i ..sample_env .env

• Start the local server

$ yarn start

Server setup

• Install the necessary dependencies for the server

#  cd path/to/graphql-bff-example/server
$ yarn install

• Register with https://newsapi.org/ and https://rapidapi.com/. Generate API keys to access the API endpoints hosted by these services.

• Create the .env file and fill in the required values

$ cp -i ..sample_env .env

• Start the local server

$ yarn start