https://github.com/isystk/nextjs-nestjs-graphql

Next.js（フロントエンド）・Nest.js（サーバーサイド）・GraghQLを利用したサンプルアプリケーションです。
https://github.com/isystk/nextjs-nestjs-graphql

Last synced: 3 months ago
JSON representation

Next.js（フロントエンド）・Nest.js（サーバーサイド）・GraghQLを利用したサンプルアプリケーションです。

• Host: GitHub
• URL: https://github.com/isystk/nextjs-nestjs-graphql
• Owner: isystk
• License: mit
• Created: 2021-12-13T00:25:28.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2022-03-21T02:57:56.000Z (about 3 years ago)
• Last Synced: 2025-01-10T13:53:04.000Z (5 months ago)
• Language: TypeScript
• Size: 31.7 MB
• Stars: 3
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
🌙 nextjs-nestjs-graphql

====

[![isystk](https://circleci.com/gh/isystk/nextjs-nestjs-graphql.svg?style=svg)](https://circleci.com/gh/circleci/circleci-docs)

![GitHub issues](https://img.shields.io/github/issues/isystk/nextjs-nestjs-graphql)

![GitHub forks](https://img.shields.io/github/forks/isystk/nextjs-nestjs-graphql)

![GitHub stars](https://img.shields.io/github/stars/isystk/nextjs-nestjs-graphql)

![GitHub license](https://img.shields.io/github/license/isystk/nextjs-nestjs-graphql)

## 📗 プロジェクトの概要

Next.js（フロントエンド）・Nest.js（サーバーサイド）・GraghQLを利用したサンプルアプリケーションです。

### 利用している技術

- Next.js

- typescript 4

- material-ui

- redux-toolkit

- Apollo Client

- Nest.js

- Prisma

- GraphQL

## 🌐 Demo

![投稿一覧画面](./app1.png "投稿一覧画面")

![投稿画面](./app2.png "投稿画面")

- ログイン/ログアウト

- 会員登録

- 投稿一覧

- 投稿詳細

- マイページ（一覧・登録・更新・削除）

## 📦 ディレクトリ構造

```

.

├── docker/

│   ├── mysql/

│   ├── nestjs/

│   │   └── app/ (Nest.js のソースコード)

│   │       ├── prisma/

│   │       ├── src/

│   │       └── test/

│   └── docker-compose.yml

└── frontend/

    ├── src/ (Next.js のソースコード)

    │   ├── @types/

    │   ├── auth/

    │   ├── common/

    │   ├── components/

    │   ├── pages/

    │   ├── store/

    │   ├── styles/

    │   └── utilities/

    └── test/

```

## 💬 使い方

### データベースの準備

```

# 下準備

$ ./dc.sh init

# Dockerを起動する

$ ./dc.sh start

# データベースとPHPが立ち上がるまで少し待ちます。(初回は5分程度)

# MySQLにログインしてみる

$ ./dc.sh mysql login

# Dockerを停止する場合

$ ./dc.sh stop

```

### バックエンドの準備

```

$ cd backend

$ cp .env.example .env

$ yarn

$ npx prisma generate

$ npx prisma migrate dev --name post

$ yarn start

```

#### GraghQLの使い方

http://localhost:9000/graphql

![graphql](./graphql.png "graphql")

```

# 以下のように必要なフィールドのみを指定してデータを取得できます。

-----

query { 

  getPosts {

    id

    title

    description

    photo

    createdAt

    updatedAt

    authorId

  }

}

-----

# Curlで送信する場合は以下のようにJSONにして改行を削除する必要があります。

-----

$ QUERY=$(cat <