https://github.com/tilap/next-typescript-apollo
https://github.com/tilap/next-typescript-apollo
Last synced: 5 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/tilap/next-typescript-apollo
- Owner: tilap
- Created: 2021-12-04T13:02:02.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-03-06T20:46:52.000Z (over 3 years ago)
- Last Synced: 2025-02-13T08:26:30.407Z (over 1 year ago)
- Language: TypeScript
- Size: 830 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
next-advanced-apollo-starter
Advanced, but minimalistic Next.js and Apollo starter
What's included •
Getting Started •
Apollo usage •
Writing tests •
Docker usage
## What's included
### Features
- Latest [Next.js](https://nextjs.org/) version.
- Latest packages updates.
- GraphQL [Apollo](https://www.apollographql.com/docs/react/essentials/get-started/) client with built-in
cookie-based [JWT](https://jwt.io/) token authentication.
- Localization via [react-i18next](https://react.i18next.com/).
- [TypeScript](https://www.typescriptlang.org/) environment.
- Code linting:
- [eslint](https://eslint.org/) with awesome plugins: [nextjs](https://www.npmjs.com/package/eslint-config-nextjs), [import](https://www.npmjs.com/package/eslint-plugin-import), [unicorn](https://www.npmjs.com/package/eslint-plugin-unicorn).
- [prettier](https://prettier.io/)
- [lint-staged](https://www.npmjs.com/package/lint-staged) to process when commiting
- [husky](https://www.npmjs.com/package/husky) with hooks configured
- [commitlint](https://www.npmjs.com/package/commitlint)
- _No custom server_.
### Developer experience
- Testing environment via [Jest](https://jestjs.io/) and [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro).
- Git hooks for pre-commit, pre-push and commit message.
- Debug configuration for [VSCode](https://code.visualstudio.com/).
- [Docker](https://www.docker.com/) configuration to serve **production-ready** build with Nginx.
## Getting started
### Install
Install dependancies
```bash
yarn install
```
### Start development server
```bash
yarn run dev
```
## Apollo usage
### Client-side rendering (CSR)
```jsx
import { gql, useQuery } from '@apollo/client';
const GET_CATS = gql`
query GetCats {
cats {
id
breed
}
}
`;
const MyPage = () => {
const { loading, data } = useQuery(GET_CATS);
if (loading) {
return
Loading...;
}
return
{JSON.stringify(data)};
};
export default MyPage;
```
### Server-side rendering (SSR)
```jsx
import { gql } from '@apollo/client';
import { initializeApollo, addApolloState } from '../lib/apollo';
const GET_CATS = gql`
query GetCats {
cats {
id
breed
}
}
`;
const MyPage = (props) => {
return
{JSON.stringify(props.data)};
};
export async function getServerSideProps() {
const apolloClient = initializeApollo();
const { data } = await apolloClient.query({
query: GET_CATS,
});
return addApolloState(apolloClient, {
props: {
data,
},
});
}
export default MyPage;
```
## Writing tests
[Jest](https://jestjs.io/) is a great tool for testing. To run tests located in `/tests` directory, use `test` script
from `package.json`:
```bash
yarn test
```
---
Pretty much everything you need to know about project structure, SSR, etc., you can find in
the [official Next.js documentation](https://nextjs.org/docs).
## Docker usage
To build and run Dockerized **production-ready** container, run:
```bash
docker-compose up --build
```