Intended use for API.ts?

[callagga]

What is the intended use for API.ts? (I’m using react and typescript)

Is it just intended to be used by the AWS amplify generated queries to support these when you do your Query / Mutation calls to the backend only? Or are people utilising the types within their javascript application as well? Perhaps good not to so as not to couple your own code with the automatic generated types amplify creates with API.ts in case of changes to schema/

Also what are people doing in terms of defines interfaces for the data passed from amplify queries to/from through to react UI layers? I.e. Using same types, or trying to decouple between react UI code, and backend/redux...

(Background - As a beginner I started to collect data in class objects to add some helpful functions with them - but then passing them back from react through to amplify api and redux reducers I hit the issue with functions, so had a write a function within the class to export the fields to a pure object )

[powerful23]

For the API category this doc can tell you the details: https://aws-amplify.github.io/docs/js/api

For the issues you have when using API category, can you provide some code snippets to make it more intuitive? Thanks!

[callagga]

Perhaps a specific question:

I note that when calling the API e.g.

        const graphqlInput = graphqlOperation(updateEvent, variables);
        (API.graphql(graphqlInput) as Promise<any>).then((results:any) => {
            dispatch(editEventSuccessAction(newFilteredEvent as PlannerEvent));
        }).catch((err:any) => {
            console.log("ERROR", err);
            dispatch(editEventsErrorAction(err));
        })

The graphqlOperation call references "updateEvent" from API.ts

export const updateEvent = `mutation UpdateEvent($input: UpdateEventInput!) {
  updateEvent(input: $input) {
    id
    name
    startDate
    endDate
    plan {
      id
      name
      events {
        nextToken
      }
    }
  }
}
`;

So I can see that amplify uses this to help call the interface.

My question was just whether anything in API.ts would typically be used by a react developer within his own react code (i.e. for view layer)? Or another way to ask the same question, whether API.ts was developed to be used elsewhere in the app, or just to support the AWS backend calls?

[jkeys-ecg-nmsu]

I use the API object for smaller projects that don't need ApolloProvider or the AWSAppSyncClient.

You can still perform the fundamental operations with API.graphql, so it's probably best to start with that unless you need caching, offline query caching, etc.

For reference you could use the generated gql operation above with the API object like this:

async function updateEvent(input) {
  try { 
    const results = await API.graphql(graphqlOperation(mutations.updateEvent, { input: input });
    console.log("results of API GraphQL operation", results)
  } catch(e) {
    console.log("failed to update event: ", e)
  }
}

updateEvent({id: "my-id", name: "my-name"})

[callagga]

thanks - mind if I ask then how you manage the data "objects" within your react client project? i.e. do you just pass basic javascript arrays, objects, or do you actually use classes/objects (with associated method) and then make use of these in your actions/redux layer through to your UI/react layer?

(background was I was wondering whether to what extend auto-generated code/types/objects by amplify might be used for convenience to pass data from AWS=>actions=>react layers or not...

[jkeys-ecg-nmsu]

Well, without violating my NDA, I can tell you that AppSync (GraphQL) subscriptions are very useful for components that need to react to changes to your data source in (near-) real time, and it makes more logical sense to me to put subscription-based code in the component whose view will be affected. Then you could modify your component's local state in your subscriptions' next callbacks, allowing your view to update in response to mutations in your AppSync data sources.

We don't currently use redux or any other actions middleware, but my thoughts regarding managing an application's dataflow via events and regular expressions can be found here (#2669), would love to hear your thoughts. For context, my company works on distributed, 99% event-based systems which use React as the view layer, so managing the entirety of our applications' state with local state and events seems to be a scalable solution (when combined with the regex-enabled middleware that @undefobj has mocked up).

I also think that reactive programming combined with local (or container+props) state might be a powerful paradigm. I'm experimenting with this; I'd love to have each piece of state be a property(in Rx/BaconJS terminology) that is hooked up to whatever (merged) stream of events would update said state. (Still trying to figure out how to integrate this with setState API.)

I also like the idea of an application's initial state being rehydrated from a server, and synchronizing local and server state. You might want to take a look at the features offered by AWSAppSyncClient combined with ApolloProvider.

FWIW, my mutations.js is now approaching ~7500 lines (for a ~150 line schema). I don't know if you view that kind of codegen as convenient, but I certainly do :P

[manueliglesias]

Hi @callagga

I am closing this issue as it seems that @jkeys-ecg-nmsu gave you great answers and pointers.

Thanks!

[callagga]

ok thanks

[dantasfiles]

@callagga

What is the intended use for API.ts? (I’m using react and typescript) Is it just intended to be used by the AWS amplify generated queries to support these when you do your Query / Mutation calls to the backend only? Or are people utilising the types within their javascript application as well?

I had these questions too, and coded up some examples of using the types in API.ts in Using the API.ts Typescript types generated by AWS Amplify

[github-actions[bot]]

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.