AWS Graphql Error - Amplify mutations cannot write to dynamoDB - amazon-web-services

Question

I am new to the AWS world and have been working on an Amplify project for a few months. Project uses Amplify front-end with Appsync / GraphQL and dynamodb all set up via the console in Cloud9. Read access to the backend using the graphql queries works great but I simply cannot get any of the auto-generated mutations to work. All throw ""Request aborted" errors with ""Invalid URI format".
Here's a snippet of the error
Here's a simple example from my code:
import { createCategory} from './graphql/mutations';
//Here's the start of our Javascrpt App
const WriteTestPage = () => {
//define function to handle submitButton, which is used to create a new customer
async function handleSubmit () {
try {
//For Customers, the name is required
console.log('Called our API - top');
const categoryDetails = {
description: 'My new category'
}
//Call GraphQL with correct parameters to create in backend
const returnedCategory = await API.graphql(graphqlOperation(createCategory, { input: categoryDetails}));
console.log('Called our API');
} catch (err) {
console.log('error creating category', err);
}
}
Here's the corresponding schema. I've opened up all access and have a user pool as well as an API key.
type Category
#model
#auth(
rules: [
{ allow: groups, groups: ["superAdmin"]} #allow the admin to crud the table
{ allow: private, operations: [read, update, create, delete]} #allow the authenticated users to read data from the table
{ allow: public, operations: [read, update, create, delete]} #DEV only - allow the UNauthenticated users to read data from the table
])
{
id: ID!
description: String!
conectivity: [Conectivity] #connection(keyName: "byCategory", fields: ["id"]) #Every Category may have zero or more conectivities
}
Here's the network trace. Doesn't appear that the front-end is even issuing a POST to the backend.
Network trace
First post on StackOverflow so appologies for any errors. Any help would be much appreciated as I'm beating my head against the wall here. I'm sure it's something simple that I'm overlooking.
Full code illustrating error:
import './App.css';
//context testing and dev
import React, { useEffect, useState } from 'react';
import Amplify, { AUTH, API, graphqlOperation } from 'aws-amplify';
import { Link } from 'react-router-dom';
//Queries and Mutations
import { createCategory} from './graphql/mutations';
import {AmplifyAuthenticator, AmplifySignOut } from '#aws-amplify/ui-react';
//Here's the start of our Javascrpt App
const WriteTestPage = () => {
//define function to handle submitButton, which is used to create a new customer
async function handleSubmit () {
try {
//For Customers, the name is required
console.log('Called our API - top');
const categoryDetails = {
description: 'My new catetory'
}
//Call GraphQL with correct parameters to create in backend
const returnedCategory = await API.graphql(graphqlOperation(createCategory, { input: categoryDetails}));
console.log('Called our API');
} catch (err) {
console.log('error creating category', err);
}
}
//Define HTML to return in order to create page
return (
<div className="App">
<section>
<AmplifyAuthenticator>
<section>
<h3 className="sectionHeader">Write Test</h3>
<center><form onSubmit={handleSubmit}>
<div >
<table className="tableStyle">
<thead>
<tr>
<th className="tableHeaderStyle">Write Test</th>
</tr>
</thead>
<tbody>
<tr className="tableRowOddStyle">
<td className="tableDataStyle">
<button className="btn" type="submit" className="buttonStyle">Add</button>
</td>
</tr>
</tbody>
</table>
</div>
</form></center>
<p></p>
</section>
</AmplifyAuthenticator>
</section>
</div>
);
}
export default WriteTestPage;