skip to Main Content

My code was working, right up until I added a new field to the schema. I followed all the directions that I took when I created this code and schema originally. I have been from AWS::AppSync to my code to try and trace the issue but lo luck. This application uses nextjs.

Error in browser:
enter image description here

/app/layout.tsx

...
import { Amplify } from "aws-amplify";
import outputs from "../amplify_outputs.json";

console.log(Amplify.configure(outputs));
console.log(Amplify.getConfig().API.GraphQL.modelIntrospection);
...

console:

undefined
{
  version: 1,
  models: {
    NewCustomerInformation: {
      name: 'NewCustomerInformation',       
      fields: [Object],
      syncable: true,
      pluralName: 'NewCustomerInformations',
      attributes: [Array],
      primaryKeyInfo: [Object]
    }
  },
  enums: {},
  nonModels: {}
}

Relevant portions of amplify_outputs.json (in the right place):

"data": {
    "url": "https://<verified matching value>.appsync-api.us-west-1.amazonaws.com/graphql",
    "aws_region": "us-west-1",
    "api_key": "<verified matching value>",
    "default_authorization_type": "API_KEY",
    "authorization_types": ["AMAZON_COGNITO_USER_POOLS", "AWS_IAM"],
    "model_introspection": {
      "version": 1,
      "models": {
        "NewCustomerInformation": {
          "name": "NewCustomerInformation",
          "fields": {
            "id": {
              "name": "id",
              "isArray": false,
              "type": "ID",
              "isRequired": true,
              "attributes": []
            },
           ...
          },
          "syncable": true,
          "pluralName": "NewCustomerInformations",
          "attributes": [
            {
              "type": "model",
              "properties": {}
            },
            {
              "type": "auth",
              "properties": {
                "rules": [
                  {
                    "allow": "public",
                    "provider": "apiKey",
                    "operations": ["create", "update", "delete", "read"]
                  }
                ]
              }
            }
          ],
          "primaryKeyInfo": {
            "isCustomPrimaryKey": false,
            "primaryKeyFieldName": "id",
            "sortKeyFieldNames": []
          }
        }
      },
      "enums": {},
      "nonModels": {}
    }
  },

/app/somewhere/file.tsx:

import type { Schema } from "../../amplify/data/resource";
import { generateClient } from "aws-amplify/data";
...
const client = generateClient<Schema>();
  console.dir(client.models);

  const { errors, data: something } =
    await client.models.NewCustomerInformation.create({ //Error happens here
       ...
       field: value,
       ...
    });

console:

null

amplify/data/resource.tsx:

import { a, defineData, type ClientSchema } from "@aws-amplify/backend";

const schema = a.schema({
  NewCustomerInformation: a
    .model({
      ...
    })
    .authorization((allow) => [allow.publicApiKey()]),
});

// Used for code completion / highlighting when making requests from frontend
export type Schema = ClientSchema<typeof schema>;

// defines the data resource to be deployed
export const data = defineData({
  schema,
  authorizationModes: {
    defaultAuthorizationMode: "apiKey",
    apiKeyAuthorizationMode: { expiresInDays: 30 },
  },
});

Running npx ampx sandbox gives me the same amplify_outputs.json with no changes. App deploys successfully. Data shows new field added, which matches amplify_outputs.json. enter image description here

I have spend the last 2 days on this issue, I can’t remember everything I tried.

2

Answers


  1. Chosen as BEST ANSWER

    Not sure why, but this block of code was the issue here:

    import { Amplify } from "aws-amplify";
    import outputs from "../../amplify_outputs.json";
    
    Amplify.configure(outputs);
    

    In app/layout, it worked as intended, but when the instruction pointer came around to app/something/file.tsx, the configuration was not there anymore. I copied this block of code over to this file at the top, and it's functioning correctly again.


  2. For anyone encountering this error > October of 2024, you simply need to move the { Amplify } import higher than the { generatecleint } import.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search