Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

AmplifyConsoleからデプロイ中、GraphQLスキーマのビルド時に発生する"Unknown directive '~' "の対処法

More than 1 year has passed since last update.

追記 (2019/6/5)

一番下に詳細を記述していますが、なんとamplify console側が対応してくださりました!

Amplifyとは

Amplify は、AWS を利用したモバイルやウェブアプリケーションを開発やバックエンドの構成を用意にするフレームワークです。各種AWSサービスとFrontendの連携、Backendの手軽な構成を可能。

構成

amplify-qiita (1).png

Frontend

Vue.js

Backend

AWS AppSync + GraphQL + DynamoDB

環境

  • Amplify CLI == 1.7.0
  • Vue-CLI == v3.0.0

GraphQL Schema 定義

schema.graphql
type Book @model @key(fields: ["category", "title"]){
  category: String!
  title: String!
  price: Int!
}

@model@keyはamplify側のディレクティブ
DynamoDBの Partition key や Sort Keyを設定する際に使われるのが@keyディレクティブ。
最初の要素が Partition Key、その次が Sort Key になる。

GraphQLスキーマのビルド

$ amplify api gql-compile

GraphQL schema compiled successfully.
Edit your schema at /path/to/schema.graphql or place .graphql files 
in a directory at /path/to/schema

ローカルではビルドに成功する。

AmplifyConsoleにてデプロイ

ビルド設定は以下の通り

amplify.yml
version: 0.1
backend:
  phases:
    build:
      commands:
        - '# Execute Amplify CLI with the helper script'
        - amplifyPush --simple
frontend:
  phases:
    preBuild:
      commands:
        - yarn install
    build:
      commands:
        - yarn run build
  artifacts:
    baseDirectory: dist
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

Localで上手くいっていたビルドでこける

build.log
SchemaValidationError: Schema Errors: Unknown directive "key".

ログを詳しく確認してみると

## Install AWS Amplify CLI
RUN /bin/bash -c ". ~/.nvm/nvm.sh && \
    npm install -g @aws-amplify/cli@1.5.1"

なるほど。。どうやらConsole側がinstallしている@aws-amplify/cliのバージョンが古いらしい

解決策

amplify.ymlのビルド設定に追記する

amplify.yml
~
backend:
  phases:
    build:
      commands:
        - '# Execute Amplify CLI with the helper script'
        - npm install -g @aws-amplify/cli   // ---------------- 追記 ----------------
        - amplifyPush --simple
~

Frontendからビルドが始まれば問題ないが、連携の都合上Backendのビルドとなってしまうため追記が必要になる。

終わりに

こういったバージョン違いによる不都合はよくあることなので真っ先に疑わないといけないなと反省。

追記 (2019/6/5)

GitHubにissue立てていたのですが、なんと1日足らずで対応してくださりました!!
わざわざTwitterにリプライをくださる神対応ぶり!ありがとうございます!!

yukitaka13-1110
Web ・Vue, React, Phoenix(Elixir) / Serverless / Single Page Application (SPA) / Progressive Web Application (PWA) 機械学習 ・転移学習 / Fine-tuninig / 物体検知 / Tracking / 画像処理 / 自然言語処理 (NLP)
https://github.com/yukitaka13-1110
quando
未来に向かって行動する「人」を育て、旧態産業を新しい「産業」に生まれ変わらせます。
http://quando.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away