Author: Richard Haines

Posted: 08 May 2020

take me there

While still a work in progress, learning in public is fun! With that in mind id like to share v1 of my FaunaDB CRUD hooks. Ive tested them locally and they work. They provide simple abstractions though Fauna Query Language (FQL) enables so much more and the hooks will need refactoring, but for a first version im relatively pleased! 😃

useFaunaGetAll

1export const useFaunaGetAll = (collectionIndex, limit) => {
2 const fauna = React.useContext(FaunaContext);
3 const { client, q } = fauna;
4 const [response, setResponse] = React.useState(null);
5 const [error, setError] = React.useState(null);
6 const [isLoading, setIsLoading] = React.useState(false);
7
8 React.useEffect(() => {
9 const getAll = async () => {
10 setIsLoading(true);
11 try {
12 client
13 .query(
14 q.Map(
15 q.Paginate(q.Match(q.Index(collectionIndex)), {
16 size: limit
17 }),
18 q.Lambda("ref", q.Select(["data"], q.Get(q.Var("ref"))))
19 )
20 )
21 .then(result => {
22 setResponse(result.data);
23 setIsLoading(false);
24 });
25 } catch (error) {
26 setError(error);
27 }
28 setIsLoading(false);
29 };
30 getAll();
31 }, [collectionIndex]);
32
33 return { response, error, isLoading };
34};

useFaunaGetSingle

1export const useFaunaGetSingle = (collectionIndex, id) => {
2 const fauna = React.useContext(FaunaContext);
3 const { client, q } = fauna;
4 const [response, setResponse] = React.useState(null);
5 const [error, setError] = React.useState(null);
6 const [isLoading, setIsLoading] = React.useState(false);
7
8 React.useEffect(() => {
9 const getSingle = async () => {
10 setIsLoading(true);
11 try {
12 client
13 .query(q.Get(q.Match(q.Index(collectionIndex), id)))
14 .then(result => {
15 setResponse(result.data);
16 setIsLoading(false);
17 });
18 } catch (error) {
19 setError(error);
20 }
21 setIsLoading(false);
22 };
23 getSingle();
24 }, [id]);
25
26 return { response, error, isLoading };
27};

useFaunaCreate

1export const useFaunaCreate = (collectionIndex, data, customId) => {
2 const fauna = React.useContext(FaunaContext);
3 const { client, q } = fauna;
4 const [response, setResponse] = React.useState(null);
5 const [error, setError] = React.useState(null);
6 const [isLoading, setIsLoading] = React.useState(false);
7
8 React.useEffect(() => {
9 const create = async () => {
10 setIsLoading(true);
11 try {
12 customId
13 ? client
14 .query(
15 q.Create(q.Ref(q.Collection(collectionIndex), customId), {
16 data
17 })
18 )
19 .then(result => {
20 setResponse(result.data);
21 setIsLoading(false);
22 })
23 : client
24 .query(
25 q.Create(q.Collection(collectionIndex), {
26 data
27 })
28 )
29 .then(result => {
30 setResponse(result.data);
31 setIsLoading(false);
32 });
33 } catch (error) {
34 setError(error);
35 }
36 setIsLoading(false);
37 };
38 create();
39 }, []);
40
41 return { response, error, isLoading };
42};

useFaunaUpdate

1export const useFaunaUpdate = (collectionIndex, data, id) => {
2 const fauna = React.useContext(FaunaContext);
3 const { client, q } = fauna;
4 const [response, setResponse] = React.useState(null);
5 const [error, setError] = React.useState(null);
6 const [isLoading, setIsLoading] = React.useState(false);
7
8 React.useEffect(() => {
9 const update = async () => {
10 setIsLoading(true);
11 try {
12 client
13 .query(
14 q.Update(q.Ref(q.Collection(collectionIndex), id), {
15 data
16 })
17 )
18 .then(result => {
19 setResponse(result.data);
20 setIsLoading(false);
21 });
22 } catch (error) {
23 setError(error);
24 }
25 setIsLoading(false);
26 };
27 update();
28 }, [id]);
29
30 return { response, error, isLoading };
31};

useFaunaReplace

1export const useFaunaReplace = (collectionIndex, data, id) => {
2 const fauna = React.useContext(FaunaContext);
3 const { client, q } = fauna;
4 const [response, setResponse] = React.useState(null);
5 const [error, setError] = React.useState(null);
6 const [isLoading, setIsLoading] = React.useState(false);
7
8 React.useEffect(() => {
9 const replace = async () => {
10 setIsLoading(true);
11 try {
12 client
13 .query(
14 q.Replace(q.Ref(q.Collection(collectionIndex), id), {
15 data
16 })
17 )
18 .then(result => {
19 setResponse(result.data);
20 setIsLoading(false);
21 });
22 } catch (error) {
23 setError(error);
24 }
25 setIsLoading(false);
26 };
27 replace();
28 }, [id]);
29
30 return { response, error, isLoading };
31};

useFaunaDelete

1export const useFaunaDelete = (collectionIndex, id) => {
2 const fauna = React.useContext(FaunaContext);
3 const { client, q } = fauna;
4 const [response, setResponse] = React.useState(null);
5 const [error, setError] = React.useState(null);
6 const [isLoading, setIsLoading] = React.useState(false);
7
8 React.useEffect(() => {
9 const deleteIndex = async () => {
10 setIsLoading(true);
11 try {
12 client
13 .query(q.Delete(q.Ref(q.Collection(collectionIndex), id)))
14 .then(result => {
15 setResponse(result.data);
16 setIsLoading(false);
17 });
18 } catch (error) {
19 setError(error);
20 }
21 setIsLoading(false);
22 };
23 deleteIndex();
24 }, [id]);
25
26 return { response, error, isLoading };
27};
Edit on GitHub.Previous: How I created a company then sold itNext: Custom FaunaDB hooks for new project