建置Vue+Amplify專案並加入Appsync GraphQL API

建立Vue專案並加入Amplify

安裝CLI

安裝Vue-CLI
安裝Amplify-CLI

僅供參考

在安裝Amplify-cli時,需要設定後續操作amplify-cli的IAM user
CLI會問你? Profile Name:,我是輸入amplify
可參考命名設定檔

初始化專案

1
2
3
$ vue create amplify-vue-project
$ cd amplify-vue-project
$ amplify init # 初始化amplify,幾乎都選預設值,environment輸入dev

到這邊其實就完成了,
接下來非常建議要先看看Typical workflows
知道用amplify pull/push管理雲上的資源

如果是團隊開發,記得要看看Team environments下每一篇
才能在這個專案在各個環境切來切去的時候比較有頭緒

如果在同個專案、多aws帳號各自建立環境時,遇到從dev分支merge到production分支後,
出現衝突的狀況…
可以來參考看看

加上 AppSync GraphQL API

照著Create a GraphQL API做吧

更新GraphQL

你可以透過更新 project folder 下的backend/api/~apiname~/schema.graphql更新GraphQL API
雖然還有其他方式,
但在這邊做的好處是,CLI會一併幫你處理一些事情:

  • 加上@model會幫你開 dynamodb
  • 加上@key幫你定義 dynamodb table 的 primary key,或者LSIGSI
  • 加上@auth替你在根據這份檔案產生出來的 mutation, query 及 resolver 內加上權限控管

其他方式?有哪些?

也可以直接到 AppSync控制台 開一個 sample api,
sample api 好像會用 cloudformation 一併幫你開好 dynamodb table。

也可以先手動開好 dynamodb table,
再去 AppSync控制台 開一個空白api,到DataSource分頁使用『建立資料來源』,
裡面便可以直接把 dynamodb table 匯入成 graphql api,
也會一併產生 resolver,
但整體上來說還是沒有用 Amplify CLI 產生來的便利

想要過濾Subscription

可以參考Filter Subscriptions by model fields and/or relations
而且要額外補充Using Subscription Arguments,其中的 Argument null value has meaning 章節很重要又很有趣

想要自訂resolver

參考Add a custom resolver that targets a DynamoDB table from @model

用不到後端資源了,想刪掉?

如果你使用過 Terraform…
要小心使用 amplify delete 指令,它的刪除跟 terraform 不一樣!

well
你可以執行amplify delete
但它的問題是,它不僅會把(目前env下)已經佈置上雲的後端資源收掉,
還會把專案資料夾下所有後端資源的設定刪光光