Awesome Open Source
Awesome Open Source

next-advanced-apollo-starter

Advanced, but minimalistic Next.js and Apollo starter

What's includedGetting StartedApollo usageWriting testsDocker usage

What's included

Features

Developer experience

Getting started

Start development server

In order to start development, you should run one of these commands:

npm install

After installation is complete, simply start development server:

npm run dev

Apollo usage

Client-side rendering (CSR)

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 <div>Loading...</div>;
  }

  return <div>{JSON.stringify(data)}</div>;
};

export default MyPage;

Server-side rendering (SSR)

import { gql } from '@apollo/client';
import { initializeApollo, addApolloState } from '../lib/apollo';

const GET_CATS = gql`
  query GetCats {
    cats {
      id
      breed
    }
  }
`;

const MyPage = (props) => {
  return <div>{JSON.stringify(props.data)}</div>;
};

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 is a great tool for testing. To run tests located in /tests directory, use test script from package.json:

npm test

Pretty much everything you need to know about project structure, SSR, etc., you can find in the official Next.js documentation.

Docker usage

To build and run Dockerized production-ready container, run:

docker-compose up --build

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Typescript (262,755
Reactjs (75,409
Docker (34,449
Graphql (8,389
Nextjs (7,171
Boilerplate (5,596
Nginx (5,215
Authentication (4,026
Jest (3,679
I18n (1,817
Apollo (1,309
Starter (1,269
Universal (495
Zeit (249
React Testing Library (227
Testing Library (187
Developer Experience (150
Related Projects