search

aws-amplify / amplify-js

A declarative JavaScript library for application development using cloud services.
https://docs.amplify.aws/lib/q/platform/js
Apache License 2.0
9.42k stars 2.12k forks source link

Nested GraphQL Type won't update via AppSync SDK, complains of "no provided typename" #9487

Closed PeteDuncanson closed 2 years ago

PeteDuncanson commented 2 years ago

Before opening, please confirm:

JavaScript Framework

React

Amplify APIs

GraphQL API

Amplify Categories

api

Environment information

``` # Put output below this line System: OS: Windows 10 10.0.19041 CPU: (16) x64 Intel(R) Core(TM) i7-10875H CPU @ 2.30GHz Memory: 15.67 GB / 31.84 GB Binaries: Node: 14.16.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD npm: 6.14.11 - C:\Program Files\nodejs\npm.CMD Browsers: Chrome: 97.0.4692.71 Edge: Spartan (44.19041.1266.0), Chromium (97.0.1072.62) Internet Explorer: 11.0.19041.1202 npmPackages: @asseinfo/react-kanban: ^2.2.0 => 2.2.0 @aws-amplify/ui-react: ^2.1.4 => 2.1.8 @aws-amplify/ui-react-internal: undefined () @aws-amplify/ui-react-legacy: undefined () @brainhubeu/react-file-input: 0.7.21 => 0.7.21 @craco/craco: ^6.4.1 => 6.4.1 @headlessui/react: ^1.2.0 => 1.2.0 @ideal-postcodes/api-typings: ^2.0.1 => 2.0.1 @ideal-postcodes/core-browser: ^1.5.2 => 1.5.2 @sentry/react: ^6.3.0 => 6.3.0 @sentry/tracing: ^6.2.4 => 6.2.4 @tailwindcss/aspect-ratio: ^0.2.0 => 0.2.0 @tailwindcss/forms: ^0.2.1 => 0.2.1 @tailwindcss/typography: ^0.4.0 => 0.4.0 (0.2.0) @tailwindcss/ui: ^0.6.2 => 0.6.2 @tailwindui/react: ^0.1.1 => 0.1.1 @testing-library/jest-dom: ^4.2.4 => 4.2.4 @testing-library/react: ^9.3.2 => 9.5.0 @testing-library/user-event: ^7.1.2 => 7.2.1 @types/javascript-time-ago: ^2.0.2 => 2.0.2 @types/jest: ^27.0.2 => 27.0.2 @types/node: ^14.14.33 => 14.14.33 (13.9.2, 14.11.2) @types/reach__router: ^1.3.7 => 1.3.7 @types/react: ^16.14.5 => 16.14.5 (17.0.34) @types/react-dom: ^16.9.11 => 16.9.11 (16.9.8) @types/yup: ^0.29.11 => 0.29.11 @typescript-eslint/eslint-plugin: ^4.17.0 => 4.17.0 (4.2.0) @typescript-eslint/parser: ^4.17.0 => 4.17.0 (4.2.0) apollo-boost: ^0.4.9 => 0.4.9 autoprefixer: ^10.2.5 => 10.2.5 (7.2.6, 6.7.7, 9.7.4) aws: ^0.0.3-2 => 0.0.3-2 aws-amplify: ^4.3.10 => 4.3.12 aws-amplify-react: ^5.1.9 => 5.1.9 aws-appsync: ^4.1.4 => 4.1.4 aws-appsync-react: ^4.0.10 => 4.0.10 aws-sdk: ^2.860.0 => 2.860.0 axios: ^0.24.0 => 0.24.0 (0.21.4, 0.19.0) babel-eslint: ^10.1.0 => 10.1.0 chart.js: ^3.2.0 => 3.2.0 chart.js-auto: undefined () chart.js-helpers: undefined () craco-esbuild: ^0.4.2 => 0.4.2 eslint: ^7.21.0 => 7.21.0 (7.32.0) eslint-config-react-app: ^6.0.0 => 6.0.0 file-saver: ^2.0.5 => 2.0.5 formik: ^2.2.6 => 2.2.6 google-map-react: ^2.1.10 => 2.1.10 graphiql: ^1.4.0 => 1.4.0 graphql: 15.5.1 => 15.5.1 (15.8.0, 14.7.0) graphql-auto-transformer: ^1.3.1 => 1.3.1 graphql-tag: ^2.12.6 => 2.12.6 (2.11.0) history: 5 => 5.0.0 (4.10.1) jsonschema: ^1.4.0 => 1.4.0 localforage: ^1.10.0 => 1.10.0 postcode: ^5.1.0 => 5.1.0 postcss: ^8.2.8 => 8.2.8 (6.0.23, 7.0.27, 5.2.18, 8.2.4, 8.3.11, 7.0.39, 7.0.36) react: ^17.0.2 => 17.0.2 (16.14.0) react-apollo: ^3.1.5 => 3.1.5 react-chartjs-2: ^3.0.2 => 3.0.2 react-datepicker: ^3.4.1 => 3.4.1 react-dom: ^16.14.0 => 16.14.0 react-icons: ^4.3.1 => 4.3.1 react-pagination-hook: ^0.0.1 => 0.0.1 react-router-dom: ^6.0.0-beta.8 => 6.0.0-beta.8 (4.3.1) react-scripts: 4.0.3 => 4.0.3 react-tag-autocomplete: ^6.1.0 => 6.1.0 react-three-state-checkbox: ^1.3.4 => 1.3.4 react-time-ago: ^6.2.2 => 6.2.2 react-use: ^15.3.8 => 15.3.8 rimraf: ^3.0.2 => 3.0.2 (2.7.1) smoothscroll-polyfill: ^0.4.4 => 0.4.4 tailwind: ^4.0.0 => 4.0.0 tailwindcss: ^2.0.3 => 2.0.3 typescript: ^4.2.3 => 4.2.3 vest: ^2.2.3 => 2.2.3 xero-node: ^4.17.0 => 4.17.0 yup: ^0.29.3 => 0.29.3 npmGlobalPackages: @aws-amplify/cli: 7.6.9 nodemon: 2.0.7 ts-node: 9.1.1 yarn: 1.22.10 ```

Describe the bug

Using AppSync SDK (Offline setup but disableOffline: true in the config for now) I'm trying to update a GraphQL type within one of my models and I can't for the life of me get it to.

When I try up update I get this error thrown:

Error: Store error: the application attempted to write an object with no provided typename but the store already contains an object with typename of Location for the object of id $Address:c722bcc4-c5c5-4735-b1ec-3585c1f1c7e5.geoCords. The selectionSet that was trying to be written is:
geoCords {
  lat
  lon
  __typename
}
    at StoreWriter.push../node_modules/apollo-cache-inmemory/lib/writeToStore.js.StoreWriter.writeFieldToStore (http://localhost:3000/static/js/vendors~main.chunk.js:330044:27)
    at http://localhost:3000/static/js/vendors~main.chunk.js:329931:27
    at Array.forEach (<anonymous>)
    at StoreWriter.push../node_modules/apollo-cache-inmemory/lib/writeToStore.js.StoreWriter.writeSelectionSetToStore (http://localhost:3000/static/js/vendors~main.chunk.js:329923:33)
    at StoreWriter.push../node_modules/apollo-cache-inmemory/lib/writeToStore.js.StoreWriter.writeFieldToStore (http://localhost:3000/static/js/vendors~main.chunk.js:330022:22)
    at http://localhost:3000/static/js/vendors~main.chunk.js:329931:27
    at Array.forEach (<anonymous>)
    at StoreWriter.push../node_modules/apollo-cache-inmemory/lib/writeToStore.js.StoreWriter.writeSelectionSetToStore (http://localhost:3000/static/js/vendors~main.chunk.js:329923:33)
    at StoreWriter.push../node_modules/apollo-cache-inmemory/lib/writeToStore.js.StoreWriter.writeResultToStore (http://localhost:3000/static/js/vendors~main.chunk.js:329901:25)
    at InMemoryCache.push../node_modules/apollo-cache-inmemory/lib/inMemoryCache.js.InMemoryCache.write (http://localhost:3000/static/js/vendors~main.chunk.js:328955:26)
    at http://localhost:3000/static/js/vendors~main.chunk.js:332894:67
    at Array.forEach (<anonymous>)
    at http://localhost:3000/static/js/vendors~main.chunk.js:332894:31
    at InMemoryCache.push../node_modules/apollo-cache-inmemory/lib/inMemoryCache.js.InMemoryCache.performTransaction (http://localhost:3000/static/js/vendors~main.chunk.js:329007:9)
    at DataStore.push../node_modules/apollo-client/data/store.js.DataStore.markMutationResult (http://localhost:3000/static/js/vendors~main.chunk.js:332893:24)
    at changeFn_1 (http://localhost:3000/static/js/vendors~main.chunk.js:332831:23)
    at http://localhost:3000/static/js/vendors~main.chunk.js:332844:21
    at InMemoryCache.push../node_modules/apollo-cache-inmemory/lib/inMemoryCache.js.InMemoryCache.performTransaction (http://localhost:3000/static/js/vendors~main.chunk.js:329007:9)
    at http://localhost:3000/static/js/vendors~main.chunk.js:329019:19
    at RecordingCache.push../node_modules/apollo-cache-inmemory/lib/recordingCache.js.RecordingCache.record (http://localhost:3000/static/js/vendors~main.chunk.js:329780:9)
    at record (http://localhost:3000/static/js/vendors~main.chunk.js:329816:27)
    at InMemoryCache.push../node_modules/apollo-cache-inmemory/lib/inMemoryCache.js.InMemoryCache.recordOptimisticTransaction (http://localhost:3000/static/js/vendors~main.chunk.js:329016:83)
    at DataStore.push../node_modules/apollo-client/data/store.js.DataStore.markMutationInit (http://localhost:3000/static/js/vendors~main.chunk.js:332840:24)
    at QueryManager.push../node_modules/apollo-client/core/QueryManager.js.QueryManager.mutate (http://localhost:3000/static/js/vendors~main.chunk.js:331770:24)
    at AWSAppSyncClient.push../node_modules/apollo-client/ApolloClient.js.ApolloClient.mutate (http://localhost:3000/static/js/vendors~main.chunk.js:331150:40)
    at AWSAppSyncClient.push../node_modules/aws-appsync/lib/client.js.AWSAppSyncClient.mutate (http://localhost:3000/static/js/vendors~main.chunk.js:353533:44)
    at http://localhost:3000/static/js/main.chunk.js:7623:38
    at Generator.next (<anonymous>)
    at http://localhost:3000/static/js/main.chunk.js:7499:61
    at new Promise (<anonymous>)
    at __async (http://localhost:3000/static/js/main.chunk.js:7483:10)
    at Object.update (http://localhost:3000/static/js/main.chunk.js:7615:30)
    at http://localhost:3000/static/js/main.chunk.js:88597:81
    at Generator.next (<anonymous>)
    at fulfilled (http://localhost:3000/static/js/main.chunk.js:88533:24)

Given a schema like this:

type Location {
  lat: Float
  lon: Float
}

type Address {
  id: ID!
  name: String
  geoCords: Location
}

I'm running a mutation like so using the buildMutation helpers (https://docs.amplify.aws/lib/graphqlapi/offline/q/platform/js/#with-helper):

// Most of my graphql is auto-generated via codegen
const response = await getClient().mutate(
    buildMutation(
      getClient(),
      gql(updateAddress),
      {
        // Side note, can't seem to get these Input types out of the generated code, so have to cut and paste them in for now, any pointers?
        inputType: gql`
          input UpdateAddressInput {
            id: String
            companyName: String
            addressLine1: String
            addressLine2: String
            addressLine3: String
            town: String
            county: String
            postcode: String
            phoneNumber: String
            bedrooms: Int
            houseTypeID: String
            hasConservatory: Boolean
            customerID: String
            addressStatus: String
            importantVisitSummary: String
            importantCAMSummary: String
            sectorID: String
            areaID: String
            geoCords: LocationInput   # Think this is right, but tried it as Location and just plain { lat: Float, lon: Float } no dice!
            hasGeocodingIssues: Boolean
            buildNumber: String
            buildName: String
            premise: String
            postcodeOutward: String
            postcodeInward: String
            signUpDate: String
            safePlaceToStoreMoney: String
            legacyCleanerPlannerID: String
            signedUpPreSUDS: Boolean
            _version: Int
          }
        `,
        variables,
      },
      (_variables) => [gql(listtAddress)], // Tried getAddress and updateAddress in here too, same error
      "Address",
      "id"
    )
  );

Its an odd error message as it calms it already has data stored but if I run the page in Incognito then it still throws it even though that shouldn't have it stored? Could be wrong there though.

Expected behavior

The update goes through and no error thrown.

With some messing around I have had it save but its blowing up my app, a refresh though will show the new data in my app. Maybe I can just "handle it" by catching the error but its causing me headaches.

Reproduction steps

See description of the issue.

Code Snippet

// Put your code below this line.

Log output

``` // Put your logs below this line ```

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

chrisbonifacio commented 2 years ago

Hi @PeteDuncanson sorry for the delay. Could you specify which SDK you're using?

https://github.com/awslabs/aws-mobile-appsync-sdk-js

OR

https://github.com/aws/aws-sdk-js-v3

Is there a reason why you're using an AppSync client directly rather than the Amplify?

It seems like you're trying to update the LocationInputType while performing an updateAddress mutation? Couldn't you do that in the schema itself first?

Lastly, could you provide an updated link to the docs? It seems the one mentioned in the issue description links to a page mentioning DataStore and and not the AppSync SDK buildMutation helper function.

PeteDuncanson commented 2 years ago

@chrisbonifacio wow this is an old one!

I've a feeling that the doc page is correct its just been edited to remove reference to the buildMutation stuff, anyway you can find the repos and check? I had a look for it but could only find this (https://github.com/aws-amplify/docs) which doesn't appear to be that doc site.

In honestly I think this is a problem with some really old code that you folks don't recommend or support anyway, you push everyone to DataStore (which also has its problems) for anything Offline so I'm assuming that using the buildMutation helpers is no longer the recommended or supported route.

Additionally we transitioned away from DataStore to Amplify's GraphQL queries as you suggested due to us being stuck with issues like above. As a work around for anyone coming behind me we chose to flatten our types when we hit this, so instead of having a Location type we just added a geoCodeLat and geoCodeLong field to the types that used to nest these. Not pretty but it worked around the issue.

I'd hazard to guess that this one can be closed and forgotten to the bowels of time. No longer an issue for us, we worked around it or away from it.