Learn about Dataswift One
Build on Dataswift One
Deploy
6. CRUD Operations
Perform Create, Read, Update and Delete calls.
Create, read, update, delete data records
One of the core design principles of the HAT has been its ability to store any structure data. Data is grouped under a combination of namespace and endpoint.
The namespace is similar to a "database" and you can define the unique namespace name in your application. The applications can by default have read-and-write data permission in this namespace and they cannot read data from other namespaces.
The endpoint is similar to a "table" in a "database". We have the option to create multiple endpoints for our app. One common pattern is to create endpoints to keep the same structured data together. For example, if we want to store the user's profile and their location in our app, we can create two separate endpoints – "profile" and "locations" – and store the data there. We don't have to define the endpoints in our application; once we write the first data the endpoints will be created.
Create data into the HAT
For the Notes we can use the following structure:
1
{
2
value: 'This is a note!',
3
dateCreated: "2020-05-20T10:17:10.398Z",
4
}
Copied!
Lets start by storing our first note into the HAT:
1
// src/features/Notes/Notes.js
2
import React, { useContext, useState } from 'react';
3
import { HatClient } from '@dataswift/hat-js';
4
import './Notes.scss';
5
import { appConfig } from '../../app.config';
6
import AuthContext from "../../components/context/AuthContext";
7
8
function Notes() {
9
const [newNote, setNewNote] = useState('');
10
const authContext = useContext(AuthContext);
11
// The endpoint to store the Notes data
12
const notesEndpoint = 'my-notes';
13
14
// Create the configuration object to pass the auth token, api version and
15
// the ssl flag to the HAT-JS
16
const config = {
17
token: authContext.user.token,
18
apiVersion: appConfig.hatApiVersion,
19
secure: appConfig.secure,
20
};
21
22
// Initialize the HatClient with the configuration file
23
const hat = new HatClient(config);
24
25
const handleChange = event => {
26
setNewNote(event.target.value);
27
};
28
29
const handleSubmit = event => {
30
event.preventDefault();
31
createData();
32
};
33
34
const createData = async () => {
35
try {
36
if (!newNote) return;
37
38
const dateCreated = new Date().toISOString();
39
40
// Create the structure for the Note
41
const body = {
42
value: newNote,
43
dateCreated: dateCreated,
44
};
45
// Use the HAT-JS library to create our first data record
46
const res = await hat.hatData().create(appConfig.namespace, notesEndpoint, body);
47
48
if (res.parsedBody) {
49
// Reset the Note value
50
setNewNote('');
51
}
52
} catch (e) {
53
console.log(e.cause + e.state)
54
}
55
};
56
57
return (
58
<form
59
onSubmit={e => handleSubmit(e)}
60
>
61
62
<input
63
.
64
.
65
value={newNote}
66
onChange={e => handleChange(e)}
67
/>
68
.
69
.
70
</form>
71
);
72
}
73
74
export default Notes;
Copied!
Read data from the HAT
And now, we can create a list to fetch the available data:
1
// src/features/Notes/Notes.js
2
function Notes() {
3
const [notes, setNotes] = useState([]);
4
.
5
.
6
.
7
const fetchNotes = async () => {
8
try {
9
// Use the HAT-JS library to get all the data records for the Note endpoint
10
const res = await hat.hatData().getAllDefault(appConfig.namespace, notesEndpoint);
11
12
if (res.parsedBody) {
13
setNotes(res.parsedBody);
14
}
15
} catch (e) {
16
console.log(e.cause + e.status);
17
}
18
};
19
20
useEffect(() => {
21
fetchNotes();
22
}, []);
23
24
const ListNotes = () =>
25
notes
26
.sort((a, b) => new Date(b.data.dateCreated) - new Date(a.data.dateCreated))
27
.map((item, index) => {
28
return (
29
<li key={index}>
30
<div className={'note-row-wrapper'}>
31
<div className={'note-content'}>{item.data.value}</div>
32
<button type={'button'}>
33
<i className={'material-icons'}>delete</i>
34
</button>
35
<button type={'button'}>
36
<i className={'material-icons'}>edit</i>
37
</button>
38
</div>
39
</li>
40
);
41
});
42
43
return (
44
<form ..>
45
.
46
.
47
<ul className={'notes-list'}>
48
<ListNotes />
49
</ul>
50
</form>
51
);
52
}
53
54
export default Notes;
Copied!
We can now see our first note!
The response from the HAT is:
1
[
2
{
3
"endpoint":"testhatapp/my-notes",
4
"recordId":"552551c8-6b46-451d-b91c-c2022561d0c6",
5
"data":{
6
"value":"this is my first note!",
7
"dateCreated":"2020-05-13T10:44:59.651Z"
8
}
9
}
10
]
Copied!
The "endpoint" is combined with the application namespace. The unique "recordId" for every data record that can be used for the data record deletion, and the "data" field where we can find the stored data.
Update a data record
In order to update the HAT record, we have to send the same structure as the response from the HAT. To keep the example simple, we can add an exclamation mark at the end of the value every time the user clicks the Update button. In order to update a data record, we have to send the data as structured in the HAT's response.
1
// src/features/Notes/Notes.js
2
function Notes() {
3
.
4
.
5
const updateData = async hatRecord => {
6
const noteIndex = notes.indexOf(hatRecord);
7
// Update the value
8
hatRecord.data.value += '!';
9
try {
10
// Update the HAT record. We have the option to pass multiple records with the array
11
const res = await hat.hatData().update([hatRecord]);
12
13
if (res.parsedBody) {
14
setNotes(prevNotes => {
15
const draft = [...prevNotes];
16
draft[noteIndex] = res.parsedBody[0];
17
return draft;
18
});
19
}
20
} catch (e) {
21
console.log(e.cause + e.status);
22
}
23
};
24
.
25
.
26
const ListNotes = () =>
27
notes
28
.sort((a, b) => new Date(b.data.dateCreated) - new Date(a.data.dateCreated))
29
.map((item, index) => {
30
return (
31
<li key={index}>
32
<div className={'note-row-wrapper'}>
33
.
34
.
35
<button type={'button'} onClick={() => updateData(item)}>
36
<i className={'material-icons'}>edit</i>
37
</button>
38
</div>
39
</li>
40
);
41
});
42
43
return (
44
<form ..>
45
..
46
</form>
47
);
48
}
49
50
export default Notes;
Copied!
Delete data from the HAT
Using the unique record ID from the Note, we can delete it easily from the HAT:
1
// src/features/Notes/Notes.js
2
function Notes() {
3
.
4
.
5
const deleteData = async recordId => {
6
try {
7
// Delete a note with record ID. We can pass an array of multiple records IDs
8
const res = await hat.hatData().delete([recordId]);
9
10
if (res.parsedBody) {
11
setNotes(prevNotes => {
12
// Find index to remove from the Note array
13
const index = prevNotes.findIndex(note => note.recordId === recordId);
14
15
if (index !== -1) {
16
const draft = [...prevNotes];
17
draft.splice(index, 1);
18
return draft;
19
} else {
20
return prevNotes;
21
}
22
});
23
}
24
} catch (e) {
25
console.log(e.cause + e.status);
26
}
27
};
28
29
const ListNotes = () =>
30
notes
31
.sort((a, b) => new Date(b.data.dateCreated) - new Date(a.data.dateCreated))
32
.map((item, index) => {
33
return (
34
<li key={index}>
35
<div className={'note-row-wrapper'}>
36
<div className={'note-content'}>{item.data.value}</div>
37
<button type={'button'} onClick={() => deleteData(item.recordId)}>
38
<i className={'material-icons'}>delete</i>
39
</button>
40
.
41
.
42
</div>
43
</li>
44
);
45
});
46
47
return (
48
<form ..>
49
..
50
</form>
51
);
52
}
53
54
export default Notes;
Copied!
To learn more detail about HAT Login, HAT-JS and storing data into the HAT please see the Javascript Developers Guide.
Last modified 3mo ago