I am using React (Ts) , Next.js 14 and Graphql over Apollo server. I have a local JSON file, which I am able to render, however I am stuck with add, delete and update.Any help for a newbie like me will be great. At least if I can add data .Also using React MUI.I am using both Apollo server and client.

UserForm.tsx
async  function UserForm(){   

  return (
    <form  className='contact-form' >      
      <FormControl fullWidth margin="normal">
        <InputLabel  htmlFor="firstName">First Name</InputLabel >
        <TextField
          className='name'
          name='name'
          type='text'
         
        /> 
      </FormControl >
       <FormControl fullWidth margin="normal">
      <InputLabel htmlFor="phone">Phone</InputLabel>
        <TextField
          className='email'
          name='email'         
          type='text'
                  /> 
      </FormControl>
      <FormGroup >
             <Button variant="contained" >Add         
        </Button>
      </FormGroup>
    </form>
  );
};

export default UserForm;
TypeDef.tsx
export const typeDefs = gql`
  type User {
    id: Int!
    name: String!
    email: String!     
  }

  type Query {
    getUsers: [User!]! 
  }

  type Mutation {
    createUser(name: String!, email: String!): User! 
  }
`;

export default typeDefs;   

Resolver
const resolvers = {
    Query: {
     getUsers: () => {
        return data 
     }
    },   }
Data.json
[
    { "id": 1, "name": "Alice", "email": "[email protected]" },
    { "id": 2, "name": "Bob", "email": "[email protected]" },
    { "id": 3, "name": "Bobbb", "email": "[email protected]" }
  ]