React Native项目添加Amplify API Mock时遇VTL解析错误求助

问题核心 #

错误提示明确指向自动生成的VTL解析器模板语法错误：在Query.syncCouriers.req.vtl文件中使用了||符号，但VTL模板的逻辑或运算符应为or，而非JavaScript风格的||。这是Amplify CLI生成公共权限（allow: public）@auth规则解析器时的常见bug。

解决方案 #

1. 直接修改出错的VTL文件 #

• 定位到错误提示中的文件：amplify/backend/api/[你的API名称]/resolvers/Query.syncCouriers.req.vtl
• 打开文件，找到第12行附近的代码，将||替换为VTL规范的or
  示例修改：

  # 原错误代码
  #if( $filter || $ctx.stash.authFilter.or )
  
  # 修改后代码
  #if( $filter or $ctx.stash.authFilter.or )
  

• 保存文件后重新执行amplify mock api

2. 重新生成解析器（若修改后仍报错） #

如果手动修改后问题重复出现，说明CLI会重新生成错误的模板，可按以下步骤重置：

• 删除现有解析器目录：

  rm -rf amplify/backend/api/[你的API名称]/resolvers
  

• 重新编译生成解析器：

  amplify api gql-compile
  

• 再次启动Mock服务：

  amplify mock api
  

3. 升级Amplify CLI（可选） #

旧版本CLI存在该VTL模板生成bug，升级到最新稳定版可避免后续重复出现：

npm install -g @aws-amplify/cli

附用户提供的项目配置信息 #

package.json #

{
  "name": "ubereatsuser",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@react-native-async-storage/async-storage": "1.17.11",
    "@react-native-community/netinfo": "9.3.5",
    "@react-native-picker/picker": "2.4.8",
    "@react-navigation/bottom-tabs": "^6.3.1",
    "@react-navigation/material-bottom-tabs": "^6.2.1",
    "@react-navigation/material-top-tabs": "^6.2.1",
    "@react-navigation/native": "^6.0.10",
    "@react-navigation/native-stack": "^6.6.1",
    "aws-amplify": "^4.3.20",
    "aws-amplify-react-native": "^6.0.4",
    "expo": "~47.0.0",
    "expo-status-bar": "~1.4.4",
    "graphql": "^14.7.0",
    "react": "18.1.0",
    "react-dom": "18.1.0",
    "react-native": "0.70.8",
    "react-native-maps": "1.3.2",
    "react-native-pager-view": "6.0.1",
    "react-native-paper": "^4.12.0",
    "react-native-safe-area-context": "4.4.1",
    "react-native-screens": "~3.18.0",
    "react-native-tab-view": "^3.1.1",
    "react-native-vector-icons": "^9.1.0",
    "react-native-web": "~0.18.10"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@types/react": "~18.0.27",
    "@types/react-native": "~0.64.12",
    "typescript": "^4.9.4"
  },
  "private": true
}

schema.graphql #

enum TransportationModes {
  DRIVING
  BICYCLING
}

type Courier @model @auth(rules: [{allow: public}]) {
  id: ID!
  name: String!
  sub: String!
  lat: Float
  lng: Float
  transportationMode: TransportationModes!
}

type Basket @model @auth(rules: [{allow: public}]) {
  id: ID!
  BasketDishes: [BasketDish] @hasMany(indexName: "byBasket", fields: ["id"])
  userID: ID! @index(name: "byUser")
  restaurantID: ID! @index(name: "byRestaurant")
}

enum OrderStatus {
  NEW
  COOKING
  READY_FOR_PICKUP
  PICKED_UP
  COMPLETED
  ACCEPTED
}

type OrderDish @model @auth(rules: [{allow: public}]) {
  id: ID!
  quantity: Int!
  Dish: Dish @hasOne
  orderID: ID! @index(name: "byOrder")
}

type Order @model @auth(rules: [{allow: public}]) {
  id: ID!
  userID: ID! @index(name: "byUser")
  Restaurant: Restaurant @hasOne
  total: Float!
  status: OrderStatus!
  OrderDishes: [OrderDish] @hasMany(indexName: "byOrder", fields: ["id"])
  Courier: Courier @hasOne
}

type BasketDish @model @auth(rules: [{allow: public}]) {
  id: ID!
  quantity: Int!
  Dish: Dish @hasOne
  basketID: ID! @index(name: "byBasket")
}

type User @model @auth(rules: [{allow: public}]) {
  id: ID!
  name: String!
  address: String!
  lat: Float!
  lng: Float!
  Orders: [Order] @hasMany(indexName: "byUser", fields: ["id"])
  Baskets: [Basket] @hasMany(indexName: "byUser", fields: ["id"])
  sub: String!
}

type Dish @model @auth(rules: [{allow: public}]) {
  id: ID!
  name: String!
  image: String
  description: String
  price: Float!
  restaurantID: ID! @index(name: "byRestaurant")
}

type Restaurant @model @auth(rules: [{allow: public}]) {
  id: ID!
  name: String!
  image: String!
  deliveryFee: Float!
  minDeliveryTime: Int!
  maxDeliveryTime: Int!
  rating: Float
  address: String!
  lat: Float!
  lng: Float!
  Dishes: [Dish] @hasMany(indexName: "byRestaurant", fields: ["id"])
  Baskets: [Basket] @hasMany(indexName: "byRestaurant", fields: ["id"])
}

内容的提问来源于stack exchange，提问作者Greg W.F.R