### 準備

* siteId　: site 選択 > post画面上段にsiteIdをメモします (ex: siteId : 3)


***
### ■ Post query

* post list query
````
query {
  posts(siteId: 2) {
    id
    title
    content
    categoryId
    createdAt    
  }
}
````

* post: 1 record
```
query {
  post(id: 2) {
    id
    title
    content
    categoryId
    createdAt
  }
}
```

***
### ■ Page query

* page list

```
query {
  pages(siteId: 2) {
    id
    title
    content
    createdAt    
  }
}

```

* page 1 record
```
query {
  page(id: 2) {
    id
    title
    content
    createdAt
  }
}
```
***
### ■ Category query

* category list

```
query {
  categories(siteId: 2) {
    id
    name
    createdAt    
  }
}
```

headless-4  GraphQL sample

### ■ Site

* 複数サイト分、登録可能です

* create 押すと、site(サイト)追加できます。

* create画面で、name を入力

***
### ■  Post(投稿)　データ

![img](https://img-static-kuc.netlify.app/img/js-front1/headless4/ss-head-4-1index.png)

* create 押すと、追加できます。

* create画面で、title, content(本文) を入力

* contentは、MD形式(markdown)を、推奨としています。

* categoryを指定しない場合、未入力で問題ありません

* [create]押すと、保存できます

***
### ■ Post Edit/ 編集

* 一覧の、Editボタンを押すと、編集画面が開きます。編集、削除 が可能です

![img](https://img-static-kuc.netlify.app/img/js-front1/headless4/ss-head-4-2edit.png)

***
### ■ Page (固定ページ)

![img](https://img-static-kuc.netlify.app/img/js-front1/headless4/ss-head-4-3page.png)

* Postと同様、タイトル、本文が入力可能です

headless-4 操作説明

# Setup, apollo_cms1

```
npm install
```

* .env:  set password, host , dbname

*  supabase の場合　プロジェクト選択、左下の設定アイコン＞database > Connection string 
 のURI

* password, HOST  を入力

* dbnameは、作成したDB名
```
DATABASE_URL="postgresql://postgres:__PASS__@__HOST__.supabase.co:5432/dbname"
```

* マイグレーション


```
npx prisma migrate dev --name init
```
* テーブルが、作成されるので。確認下さい

***
* local start

```
yarn start
```

***
# Setup, headless-4

```
npm install
```


***
### Setup , etc

* firebase 設定

* firebase > プロジェクト選択 > プロジェクトの概要 > プロジェクトの設定

* Firebase を初期化の、keyコード をコピーしておきます。

***
* next.config.js , 

* APOLLO_SV_URI : 設置したbackend　ドメインのエンドポイント

* firebase設定

先頭がREACT_APP_FIREBASEの変数を、上記のfirebase画面のコードを埋めます

```
APOLLO_SV_URI: "http://localhost:4000/graphql",

REACT_APP_FIREBASE_API_KEY: "",
REACT_APP_FIREBASE_AUTH_DOMAIN: "",
REACT_APP_FIREBASE_PROJECT_ID: "",
REACT_APP_FIREBASE_STORAGE_BUCKET: "",
REACT_APP_FIREBASE_MESSAGE_SENDER_ID: "",
REACT_APP_FIREBASE_APP_ID: "",

```

***
### Start server
* Start :

```
yarn dev
```

headless-4 Setup

* 下記の Gitで公開しております。サーバーレス構成も可能です

* frontend

https://github.com/kuc-arc-f/headless-4

* backend

https://github.com/kuc-arc-f/apollo_cms1

***
### 構成
* db: postgres

* front : next.js 12

* backend: apollo-server (apollo-server-express)

***
### ■ 補足

* 参考に設置場所の、テスト環境を記載しておきます。

* DB: postgres: us-east リージョン(supabase)

* front /nextjs :us-east-1 リージョン(vercel hobby)

* backend /apollo-serve :us-east-1 リージョン(vercel hobby)


js_front1

Category : headless-4

headless-4 GraphQL sample

headless-4 操作説明

headless-4 Setup

headless-4 download