Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/gomagoma676/nextjs-hasura-basic-lesson

[Hasura基礎編] Nextjs+Hasura+Apollo Clientで学ぶモダンGraphQL Web開発 🚀
https://github.com/gomagoma676/nextjs-hasura-basic-lesson

apolloclient hasura-graphql msw nextjs react-testing-library

Last synced: about 1 month ago
JSON representation

[Hasura基礎編] Nextjs+Hasura+Apollo Clientで学ぶモダンGraphQL Web開発 🚀

Awesome Lists containing this project

README 

        
## Project setup : 

#### ・Nextjs

#### ・TypeScript

#### ・Apollo Client

#### ・React-testing-library

#### ・Next-page-tester

#### ・Tailwind CSS

#### ・Mock Service Worker(MSW)



## 1. Nextjs Project 新規作成

### 1-1. yarn install *インストールしていない場合

    npm install --global yarn

    yarn --version

### 1-2.  create-next-app

    npx [email protected] .

#### Node.js version 10.13以降が必要です。 -> ターミナル `node -v`でver確認出来ます。

### 1-3.  Apollo Client + heroicons + cross-fetch のインストール

    yarn add @apollo/[email protected] [email protected] @apollo/[email protected] [email protected] @heroicons/[email protected]

### 1-4.  React-Testing-Library + MSW + next-page-tester のインストール

    yarn add [email protected] [email protected]

    yarn add [email protected]

    yarn add -D [email protected] [email protected] [email protected] @testing-library/[email protected] @types/[email protected] @testing-library/[email protected] @testing-library/[email protected] @testing-library/[email protected] [email protected] @babel/[email protected] jest-css-modules

### 1-5.  Project folder 直下に".babelrc"ファイルを作成して下記設定を追加

    touch .babelrc

~~~

    {

        "presets": ["next/babel"]

    }

~~~

### 1-6.  package.json に jest の設定を追記

~~~

    "jest": {

        "testPathIgnorePatterns": [

            "/.next/",

            "/node_modules/"

        ],

        "moduleNameMapper": {

            "\\.(css)$": "/node_modules/jest-css-modules"

        }

    }

~~~

### 1-7.  package.jsonに test scriptを追記

~~~

    "scripts": {

        ...

        "test": "jest --env=jsdom --verbose"

    },

~~~

### 1-8.  prettierの設定 : settingsでRequire Config + Format On Saveにチェック

    touch .prettierrc

~~~

    {

        "singleQuote": true,

        "semi": false

    }

~~~  

## 2. TypeScript の導入

https://nextjs.org/learn/excel/typescript/create-tsconfig

### 2-1. 空のtsconfig.json作成

    touch tsconfig.json

### 2-2. 必要moduleのインストール

    yarn add -D typescript @types/[email protected] @types/[email protected]

### 2-3. 開発server起動

    yarn dev

### 2-4. _app.js, index.js -> tsx へ拡張子変更

### 2-5. AppProps型追記

~~~

    import { AppProps } from 'next/app'



    function MyApp({ Component, pageProps }: AppProps) {

        return 

    }



    export default MyApp

~~~



## 3. Tailwind CSS の導入

https://tailwindcss.com/docs/guides/nextjs

### 3-1. 必要moduleのインストール

    yarn add tailwindcss@latest postcss@latest autoprefixer@latest

### 3-2. tailwind.config.js, postcss.config.jsの生成

    npx tailwindcss init -p

### 3-3. tailwind.config.jsのcontent設定追加

~~~

module.exports = {

    content: [

        "./pages/**/*.{js,ts,jsx,tsx}",

        "./components/**/*.{js,ts,jsx,tsx}",

    ],

    darkMode: false,

    theme: {

        extend: {},

    },

    variants: {

        extend: {},

    },

    plugins: [],

}

~~~

### 3-4. globals.cssの編集

~~~

@tailwind base;

@tailwind components;

@tailwind utilities;

~~~

## 4. Test動作確認

### 4-1. `__tests__`フォルダと`Home.test.tsx`ファイルの作成

~~~

import { render, screen } from '@testing-library/react'

import '@testing-library/jest-dom/extend-expect'

import Home from '../pages/index'



it('Should render title text', () => {

  render()

  expect(screen.getByText('Next.js!')).toBeInTheDocument()

})

~~~

### 4-2. yarn test -> テストがPASSするか確認

~~~

 PASS  __tests__/Home.test.tsx

  ✓ Should render hello text (20 ms)



Test Suites: 1 passed, 1 total

Tests:       1 passed, 1 total

Snapshots:   0 total

Time:        1.728 s, estimated 2 s

~~~

## 5. GraphQL codegen

### 5-1.  install modules + init

    yarn add -D @graphql-codegen/[email protected]

    yarn graphql-codegen init

    yarn

    yarn add -D @graphql-codegen/[email protected]

### 5-2.  add queries in queries/queries.ts file

### 5-3.  generate types automatically

    yarn gen-types