In this section, you can find information about the features and implemented modules available in Apollo Universal Starter Kit.
GraphQL is a modern technology for web application development that's designed to solve the under-fetching (not enough data is sent from server to client) and over-fetching issues (too much data is sent from server to client).
These two problems are typical of applications with the RESTful design. GraphQL, on the other hand, allows us to reduce the load on the application layers.
Apollo Universal Starter Kit relies on Apollo (hence the name of the kit), a popular GraphQL implementation, to bring all the power of GraphQL in your applications. Apollo brings important functionality with Optimistic UI updates, Apollo Link State (the local state management), Apollo Redux Store, Apollo Subscriptions, and other libraries.
Apollo Universal Starter Kit fully implements two authentication mechanisms: server sessions and JSON Web Tokens. The starter kit allows you to handle sessions on both the client and the server at the same time, which is a default authentication mode that we use.
The starter kit provides several ways for user identification: password-based identification and social-based identification with Google OAuth, Facebook, LinkedIn, and GitHub.
Besides authentication, Apollo Universal Starter Kit also implements fine-grained permission-based authorization with three user types – administrators, registered users, and non-registered users.
Apollo Universal Starter Kit integrates the i18next library to help localize the application using a complete internationalization solution for the web and server applications. The starter kit provides the functionality to automatically detect and remember the language, as well as remember the language selected by the user.
The starter kit uses Apollo Optimistic UI updates, which results in immediate updates of the user interface after the user interacted with it. Once the new data arrives from the server, the application state is finalized.
Apollo Starter Kit provides the payments module built using Stripe to help you develop the recurring billing functionality. You can check out the payments module documentation for more details about the provided functionality and how to run the project with the payments module.
The starter kit integrates a PubSub mechanism for delivering live data from the server to the client using a simple library graphql-subscriptions. The Apollo Universal Starter Kit modules counter, payments, and posts & comments use GraphQL Subscriptions to update the content in the client application when the changes are made on the server.
You can try out an example of the GraphQL cursor pagination and the relay-style cursor pagination in the pagination module.
The counter module provides three examples of state management for your Apollo Universal Starter Kit-based applications. The starter kit stores the state on the client using Apollo Link State and Redux. The application state is also stored on the server using Apollo Subscriptions for real-time updates.
The starter kit uses Apollo Redux Store to handle Server Side Rendering (SSR). Once the client application requests a web page, the backend fully renders the user interface and hands off the state of Apollo Redux Store to the frontend. Then, the frontend updates itself when the user interacts with it.
You may consult the [Apollo Starter Kit configurations] to know how to enable and disable SSR.
The Knex code for accessing SQLite is included as an example of using arbitrary data source with Apollo and GraphQL. You can use any NoSQL storage or other data source in a similar way.
Debug SQL prints out excluded queries, with respective times in development mode. To set up debugging SQL, consult Apollo Universal Starter Kit configurations.
The starter kit provides great styling possibilities by integrating a few generic style libraries.
The demo web application uses the Sass version of Twitter Bootstrap. To help you style the React components, the starter kit was integrated with Styled Components. The React Native mobile application uses NativeBase.
Additionally, you can use Ant Design instead of Twitter Bootstrap for the React application.
The Vue client also uses Bootstrap, while Angular is integrated with Angular Material.
We integrated Google Analytics into the starter kit with the help of React Google Analytics.
The starter kit stands out compared to similar starter projects in that it uses webpack not only for building the code for the client application, but for the server application as well. Using webpack for the server application adds powerful features such as conditional compilation, embedding non-JavaScript and CSS files into the code, hot code reloading, and other convenient functionalities.
Automatic code reloading for the server is done using webpack. When webpack prepares hot patches on the filesystem, the SIGUSR2 signal is sent to the Node.js application, and embedded webpack Hot Module Runtime reacts to this signal and applies patches to running modules from the filesystem.
The hot code reload for the frontend is implemented with webpack-dev-server and the Hot Module Replacement plugin. Hot patches for React components are applied on the frontend and backend at the same time, so React won't complain about the differences between the client and server code.
Apollo Universal Starter Kit uses a popular transpiler Babel to transpile ES7 and ES6 code to ES5.
DataLoader is a Facebook library that helps to solve a specific issue – the N+1 query problem when sending GraphQL requests to the database – by batching and caching data requests.
You can view the example of DataLoader usage in the posts & comments module.
ESLint and TSLint will help you stick with the proper code style. Apollo Universal Starter Kit automatically checks any changes in JavaScript files with ESLint and the changes in TypeScript files with TSLint before they're committed to Git.
Apollo Universal Starter Kit is set up for React and React Native for the client and mobile applications
respectively. When building React and React Native components, you can use both .jsx and .tsx extensions as the
starter kit supports the JSX and TSX syntax.
React Helmet is a small library for React applications that's used for creating a declarative and dynamic HEAD
section for HTML pages. Put simply, using React Helmet in the starter kit, we create the <head></head> with metadata,
styles, and title for the React application.
The starter kit supports React Hot Loader, although we turned off this library by default. The starter kit uses only the Hot Module Reloading webpack plugin for hot reloading of your code. We believe that the HMR plugin for webpack covers all practical needs during development.
Using React Hot Loader in conjunction with webpack HMR makes hot reloading less predictable, which leads to various errors. Consult the [Configuring Apollo Starter Kit] section if you still want to use React Hot Loader.
Most starter kit code is written in TypeScript to ensure type safety, but you can freely mix JavaScript for developing your modules when TypeScript starts restricting your possibilities.
Just as JavaScript, TypeScript is also compiled to ES5 code.