Next Atomic

Quality

Introduction

Next Atomic is a high end app starter kit to quickly create powerful apps based on GraphQL and React

Why high end ?

Here some features:

100% typed (Typescript)
Named GraphQL React Hooks (CodeGen)
Storybook with Typescript support
NextJS 9 with Typescript
Stripe GraphQL mocking strategy
Cookie auth system for SSR
Atomic design architecture
Atomic data/operations architecture
Concurrently watched processes (Next/Storybook/Mocked Server/CodeGen)
Refresh front GraphQL schema via remote url
Connectable with any GraphQL API
Full React Hooks code style
Configured Prettier/Typescript/Eslint
Git Pre commit hooks
Ready for internationalization
Material UI implemented
SSR supported
Snackbar Provider
GraphQL Server Ready based on Parse Server: https://github.com/Moumouls/next-atomic-gql-server
SonarQube Local Integration to ensure code quality/security
Kubernetes example deployment.yml file
Rancher CI pipeline example file

Install

Next atomic is super easy to install, just fork/clone/dowload this repo and launch yarn to install packages.

Next Atomic use yarn for security and package versioning features

Main Strategy

The main goal of Next Atomic is to isolate as much as possible each component, and associate a GraphQL Fragment to each component then the N+1 component can use children's GraphQL Fragment inside it's own index.graphql. With this strategy you can easly design and create components without carrying about data availability. This is a Data Driven UI.

Development Workflow

To take full advantage of Next Atomic i recommend to use the following development workflow:

Define a page to develop
Launch storybook: yarn storybook
Go to the mocked server http://localhost:1337 or http://localhost:1338 to check in the playground if data needed for your page exists
If some data is not defined in the API check/update your GraphQL Backend/Next Atomic Server and then use/adapt yarn refresh-schema to update your local GraphQL API Contract (./graphql/cloud-schema.graphql)
Create Atoms:
- index.tsx
- stories.tsx
- index.graphql (if needed)
Create Molecules:
- index.tsx
- stories.tsx
- index.graphql (if needed)
Create Organisms:
- index.tsx
- stories.tsx
- index.graphql (if needed)
Create Template:
- index.tsx
- stories.tsx
- index.graphql (if needed)
Create Next Page
Test your app with yarn dev

Storybook development (to develop)

To start the story book you need to launch yarn storybook A mocked server with graphql playground is available at http://localhost:1337/playground or http://localhost:1338/playground You can find global mocks mocks in graphql/mock/mocks.ts

Next development (to test app, fix last bugs)

Start the next dev app with yarn dev, the next app will try to connect to the GraphQL server at http://localhost:1337/playground. A mocked server with graphql playground is available at http://localhost:1337/playground or http://localhost:1338/playground You can test your app with a true GraphQL Server by starting the Next Atomic GraphQL Server: https://github.com/Moumouls/next-atomic-gql-server

Fetch GraphQL Schema from remote

Fetch the schema of the Next Atomic Server or other GraphQL Server from yarn refresh-schema

Stories

Without data or props

Here a quick example of the logout atom

// stories.tsx
import React from 'react'
import { LogOutButton } from './index'

export default {
	component: LogOutButton,
	title: 'Atoms/LogOutButton',
}

export const Base = () => <LogOutButton />

With data using GQLProvider

Here a quick example of the viewer chip molecule

// stories.tsx
import React from 'react'
import {
	GQLLoadingProvider,
	GQLProvider,
	GQLErrorProvider,
} from '@graphql-mock'
import { ViewerChip } from './index'

export default {
	component: ViewerChip,
	title: 'Molecules/ViewerChip',
}

// A default GQLProvider wrapper exist on each story
export const Base = () => <ViewerChip />

// Every graphql request will stay into a loading state
export const Loading = () => (
	<GQLLoadingProvider>
		<ViewerChip />
	</GQLLoadingProvider>
)

// Every graphql request will raise an error
export const NoViewer = () => (
	<GQLErrorProvider>
		<ViewerChip />
	</GQLErrorProvider>
)

// Here we define a special GraphQL mock resolver
// to complete the use case
const customResolvers = {
	User: () => ({
		picture: null,
	}),
}

export const WithoutPicture = () => (
	<GQLProvider customResolvers={customResolvers}>
		<ViewerChip />
	</GQLProvider>
)

With fine grained GraphQL error/response

Here a quick example of the personal informations molecule that display a form

// stories.tsx
import React from 'react'
import { GQLProvider } from '@graphql-mock'
import { PersonalInformations } from './index'

export default {
	component: PersonalInformations,
	title: 'Molecules/PersonalInformations',
}

const customResolvers = {
	Mutation: () => ({
		updateUser: () => {
			// eslint-disable-next-line
			throw 'error'
		},
	}),
}

export const Base = () => <PersonalInformations />
export const Error = () => (
	<GQLProvider customResolvers={customResolvers}>
		<PersonalInformations />
	</GQLProvider>
)

GraphQL Codegen

GraphQL Codegen watch and compile each file in ./components folder that's end with .graphql Each GraphQL stuff (Mutation,Query,Fragment, etc...) that you define inside .graphql files will be transformed into Typescript and merged into a special module @graphql.

For example:

# index.graphql
query viewer {
	viewer {
		user {
			...Viewer
		}
	}
}
fragment Viewer on User {
	id
	firstname
	lastname
}

Will generate a useViewerQuery typed GraphQL apollo hook and a ViewerFragment type; then you can import generated query/mutation/type like:

import { useViewerQuery } from '@graphql'

Code Quality/Security: Local SonarQube

You need to have Docker installed on your system, then you can run yarn deploy-sonarqube (need to be launched once for your entire system/projects). On OS/Docker reboot you can ensure that sonarqube is up with yarn sonarqube

To run a scan yarn scan results are available at http://localhost:9000

Kubernetes/Rancher

You can find some example files (that you need to modify) of deployment.yml and a .rancher-pipeline.yml.

Moumouls / next-atomic-gql