Skip to content

pushkar8723/apollo-graphql-typescript

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

  • Fully typed
  • Automated deployment
  • Hot Reloading for client
  • Watch and rebuild for GraphQL server
  • Lint check on each commit
  • 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

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published