DEV Community

loading...

FaunaDB CRUD hooks (WIP)

Richard Haines
Writing docs @prisma I love to create content and fun experiences while exploring new technologies
Updated on ・2 min read

This was originally posted on my garden.richardhaines.dev

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

export const useFaunaGetAll = (collectionIndex, limit) => {
  const fauna = React.useContext(FaunaContext);
  const { client, q } = fauna;
  const [response, setResponse] = React.useState(null);
  const [error, setError] = React.useState(null);
  const [isLoading, setIsLoading] = React.useState(false);

  React.useEffect(() => {
    const getAll = async () => {
      setIsLoading(true);
      try {
        client
          .query(
            q.Map(
              q.Paginate(q.Match(q.Index(collectionIndex)), {
                size: limit
              }),
              q.Lambda("ref", q.Select(["data"], q.Get(q.Var("ref"))))
            )
          )
          .then(result => {
            setResponse(result.data);
            setIsLoading(false);
          });
      } catch (error) {
        setError(error);
      }
      setIsLoading(false);
    };
    getAll();
  }, [collectionIndex]);

  return { response, error, isLoading };
};
Enter fullscreen mode Exit fullscreen mode

useFaunaGetSingle

export const useFaunaGetSingle = (collectionIndex, id) => {
  const fauna = React.useContext(FaunaContext);
  const { client, q } = fauna;
  const [response, setResponse] = React.useState(null);
  const [error, setError] = React.useState(null);
  const [isLoading, setIsLoading] = React.useState(false);

  React.useEffect(() => {
    const getSingle = async () => {
      setIsLoading(true);
      try {
        client
          .query(q.Get(q.Match(q.Index(collectionIndex), id)))
          .then(result => {
            setResponse(result.data);
            setIsLoading(false);
          });
      } catch (error) {
        setError(error);
      }
      setIsLoading(false);
    };
    getSingle();
  }, [id]);

  return { response, error, isLoading };
};
Enter fullscreen mode Exit fullscreen mode

useFaunaCreate

export const useFaunaCreate = (collectionIndex, data, customId) => {
  const fauna = React.useContext(FaunaContext);
  const { client, q } = fauna;
  const [response, setResponse] = React.useState(null);
  const [error, setError] = React.useState(null);
  const [isLoading, setIsLoading] = React.useState(false);

  React.useEffect(() => {
    const create = async () => {
      setIsLoading(true);
      try {
        customId
          ? client
              .query(
                q.Create(q.Ref(q.Collection(collectionIndex), customId), {
                  data
                })
              )
              .then(result => {
                setResponse(result.data);
                setIsLoading(false);
              })
          : client
              .query(
                q.Create(q.Collection(collectionIndex), {
                  data
                })
              )
              .then(result => {
                setResponse(result.data);
                setIsLoading(false);
              });
      } catch (error) {
        setError(error);
      }
      setIsLoading(false);
    };
    create();
  }, []);

  return { response, error, isLoading };
};
Enter fullscreen mode Exit fullscreen mode

useFaunaUpdate

export const useFaunaUpdate = (collectionIndex, data, id) => {
  const fauna = React.useContext(FaunaContext);
  const { client, q } = fauna;
  const [response, setResponse] = React.useState(null);
  const [error, setError] = React.useState(null);
  const [isLoading, setIsLoading] = React.useState(false);

  React.useEffect(() => {
    const update = async () => {
      setIsLoading(true);
      try {
        client
          .query(
            q.Update(q.Ref(q.Collection(collectionIndex), id), {
              data
            })
          )
          .then(result => {
            setResponse(result.data);
            setIsLoading(false);
          });
      } catch (error) {
        setError(error);
      }
      setIsLoading(false);
    };
    update();
  }, [id]);

  return { response, error, isLoading };
};
Enter fullscreen mode Exit fullscreen mode

useFaunaReplace

export const useFaunaReplace = (collectionIndex, data, id) => {
  const fauna = React.useContext(FaunaContext);
  const { client, q } = fauna;
  const [response, setResponse] = React.useState(null);
  const [error, setError] = React.useState(null);
  const [isLoading, setIsLoading] = React.useState(false);

  React.useEffect(() => {
    const replace = async () => {
      setIsLoading(true);
      try {
        client
          .query(
            q.Replace(q.Ref(q.Collection(collectionIndex), id), {
              data
            })
          )
          .then(result => {
            setResponse(result.data);
            setIsLoading(false);
          });
      } catch (error) {
        setError(error);
      }
      setIsLoading(false);
    };
    replace();
  }, [id]);

  return { response, error, isLoading };
};
Enter fullscreen mode Exit fullscreen mode

useFaunaDelete

export const useFaunaDelete = (collectionIndex, id) => {
  const fauna = React.useContext(FaunaContext);
  const { client, q } = fauna;
  const [response, setResponse] = React.useState(null);
  const [error, setError] = React.useState(null);
  const [isLoading, setIsLoading] = React.useState(false);

  React.useEffect(() => {
    const deleteIndex = async () => {
      setIsLoading(true);
      try {
        client
          .query(q.Delete(q.Ref(q.Collection(collectionIndex), id)))
          .then(result => {
            setResponse(result.data);
            setIsLoading(false);
          });
      } catch (error) {
        setError(error);
      }
      setIsLoading(false);
    };
    deleteIndex();
  }, [id]);

  return { response, error, isLoading };
};
Enter fullscreen mode Exit fullscreen mode

Discussion (0)

Forem Open with the Forem app