apollo-graphql-typescript icon indicating copy to clipboard operation
apollo-graphql-typescript copied to clipboard

Template for serverless Apollo + GraphQL + TypeScript app deployed on Netlify

Serverless typed apollo graphql with react

apollo-graphql-typescript

Netlify Status

Template for serverless typed GraphQL app deployed on netlify.

Deploy to Netlify

Demo: Application | GraphQL PlayGround

How it works

The client side of the app is deployed as static code on netlify. The GraphQL side of the application is developed using apollo-server-lambda and is deployed as netlify function. Netlify deploys each function as AWS lambda. You can read more about it here.

Although, there is a default template which can be quickly bootstraped using the command netlify functions:create, it doesn't support TypeScript and requires developer to use legacy netlify-lambda command. But using the legacy command further complicates the application and also has a few issues which you can read here.

In this template, I transpile the lambda directory using tsc command during the build process. Thus eleminating the need to use netlify-lambda. And I find this is a much more cleaner approach.

Dev Landscape

Dev Landscape

netlify dev command runs a server on port 3000 (defined in netlify.toml). This server acts as proxy for both webpack-dev-server (which we use to run our client app with hot reloading) and for the netlify GraphQL lambda.

Getting Started

Install netlify globally

npm i -g netlify-cli

Install npm dependencies

npm i

Start netlify dev server

netlify dev

App is now running on http://localhost:3000/.

Features

  • [x] Fully typed
  • [x] Automated deployment
  • [x] Hot Reloading for client
  • [x] Watch and rebuild for GraphQL server
  • [x] Lint check on each commit
  • [x] Automatic type generation based on GraphQL schema

Stateful App

If you wanted to create a serverless stateful app. Netlify got you covered. Netlify has FaunaDB add on. Using which you can quickly add a serverless database to your application. You can direclty import your GraphQL schema on Fauna dashboard to create collections and use their GraphQL endpoints to query / mutate the data.

To add FaunaDB to you application. Run following commands.

netlify addons:create fauna
netlify addons:auth fauna

Contribution

PRs are welcome.

MIT License