https://github.com/gomagoma676/react-query-spacex

[Hasura応用編] Nextjs + Firebase + HasuraによるGraphQL Web開発 : Section 2-> SpaceX API 🚀
https://github.com/gomagoma676/react-query-spacex

hasura-graphql nextjs react-query

Last synced: 5 months ago
JSON representation

[Hasura応用編] Nextjs + Firebase + HasuraによるGraphQL Web開発 : Section 2-> SpaceX API 🚀

• Host: GitHub
• URL: https://github.com/gomagoma676/react-query-spacex
• Owner: GomaGoma676
• Created: 2021-06-17T03:06:08.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2022-08-30T09:32:07.000Z (about 3 years ago)
• Last Synced: 2025-04-05T19:23:16.593Z (6 months ago)
• Topics: hasura-graphql, nextjs, react-query
• Language: TypeScript
• Homepage:
• Size: 85 KB
• Stars: 8
• Watchers: 1
• Forks: 5
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
## 🌟 Project setup 🚀

## 1. create next app

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

    npm install --global yarn

    yarn --version

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

    npx create-next-app . --ts

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

### 1-3.  react-queryのインストール

    yarn add @heroicons/react@1.0.6

    yarn add react-query@3.39.0 react-query-devtools graphql graphql-request

### 1-4.  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/react @types/node

### 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 -D tailwindcss postcss autoprefixer

### 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}",

  ],

  theme: {

    extend: {},

  },

  plugins: [],

}

~~~

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

~~~

@tailwind base;

@tailwind components;

@tailwind utilities;

~~~