CODEWITHSUNDEEP
reactjsamazon-web-servicesgraphqlaws-amplify
Akber Iqbal
Akber Iqbal

Reputation: 15041

Running 'amplify mock' resets the changes to queries, mutations

Scenario:

  1. I created a react project following the steps given on AWS Amplify docs here

  2. I answered yes to the question Do you want to generate/update all possible GraphQL operations queries, mutations and subscriptions?

  3. Everything worked as expected locally, I tested using amplify mock

  4. When the project was getting towards completion, I pushed to the cloud using amplify push

  5. I made changes to the default list, get and update functions in the following (auto-generated) files:

  1. the app worked as expected
  2. the problem came when I did 'amplify mock' after I had done amplify push earlier already (step 6)
  3. all my changes to the src/graphql/queries and src/graphql/mutations files were overwritten by the system on running amplify mock
  4. I was able to reproduce this scenario again and again... each time that I ran amplify mock it reset the src/graphql/queries and src/graphql/mutations files.

My Question:

relevant dependencies in my package.json:

  "dependencies": {
    "@aws-amplify/auth": "^3.4.1",
    "@aws-amplify/cli": "^4.28.2",
    "@aws-amplify/ui-react": "^0.2.17",
    "aws-amplify": "^3.1.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-redux": "^7.2.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.3",
    "redux": "^4.0.5"
  },

Upvotes: 1

Views: 634

Answers (1)

James Ganong
James Ganong

Reputation: 1171

Edit: I have now run into this situation myself and have a solution that's working for me.

The best option I see is to create your own files inside src/graphql for custom queries/mutations. For instance, I wanted to create queries that return less data than the auto-generated queries. So, I created src/graphql/queriesCustom.ts (I'm using typescript, hence the .ts). Inside, I copied the query I wanted, updated the variable name and the operation name. When running push or codegen it updates the auto-generated files as expected but leaves my custom files alone.

Here's an example.

In src/graphql/queries.ts there's a getUser query like this:

export const getUser = /* GraphQL */ `
  query GetUser($id: ID!) {
    getUser(id: $id) {
      id
      type
      username
      email
      avatar
      name
      bio
      categories
      createdAt
      updatedAt
    }
  }
`;

I wanted a simpler query for a portion of my app. So, I created src/graphql/queriesCustom.ts, copied the query, and updated it appropriately:

export const getUserSimple = /* GraphQL */ `
  query GetUserSimple($id: ID!) {
    getUser(id: $id) {
      id
      username
      avatar
      name
    }
  }
`;

Note, you're only changing the operation name and not the query name. So query GetUser changed to query GetUserSimple. The actual query name of getUser stays the same as this is what maps to the resolver in appsync.

Upvotes: 1

Related Questions