loading...

FaunaDB CRUD hooks (WIP)

studio_hungry profile image Richard Haines 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 };
};

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 };
};

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 };
};

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 };
};

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 };
};

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 };
};

Discussion

pic
Editor guide