@zeroin.earth/appwrite-graphql NPM

Appwrite GraphQL

This is a GraphQL library for Appwrite, built with the power of @tanstack/react-query and inspired by react-appwrite.

Installation

npm install --save @zeroin.earth/appwrite-graphql

yarn add @zeroin.earth/appwrite-graphql

Usage

Set up

You must provide the Appwrite URL and Project ID as environment variables. It does not matter how they are provided as long as they can be accessed from process.env.:

/* Endpoint - Pick one */
APPWRITE_ENDPOINT=
NEXT_PUBLIC_APPWRITE_URL=
EXPO_PUBLIC_APPWRITE_URL=

/* Project ID - Pick one */
APPWRITE_PROJECT_ID=
NEXT_PUBLIC_APPWRITE_PROJECT_ID
EXPO_PUBLIC_APPWRITE_PROJECT_ID

Provider

If you need to provide a custom endpoint and project ID, and can't use one of the above environment variables, you may override the default variables using the <AppwriteProvider>:

<AppwriteProvider endpoint="https://api.example.com/v1" projectId="jhkeri4889dfg7fg78f7g">
  <App />
</AppwriteProvider>

Hooks

import { useLogin } from "@zeroin.earth/appwrite-graphql";

export function LogIn() {
  const router = useRouter();
  const { login, oAuthLogin } = useLogin();

  const onSubmit: SubmitHandler<Inputs> = async (data) => {
    await login.mutateAsync(data, {
      onSuccess: () => {
        router.push("/profile");
      },
    });
  };

  const loginWithGoogle = () => {
    oAuthLogin.mutate({
      provider: "google",
      success: 'successUrl',
      failure: 'failureUrl',
    });
  };
}

import { useFunction } from "@zeroin.earth/appwrite-graphql";

export function Form() {
  const { executeFunction } = useFunction();

  const onSubmit: SubmitHandler<Input> = async (data) => {
    executeFunction.mutate(
      {
        functionId: '6gibhbyy6tggdf',
        body: {
          message: {
            ...data,
          },
        },
      },
      {
        onSettled: () => {
          setJustSignedUp(true);
        },
      },
    );
  };
}

Using Fragments

import {
  fragments,
  getFragmentData,
  useAccount,
} from "@zeroin.earth/appwrite-graphql";

export function Profile() {
  const { data, isLoading } = useAccount({});
  const account = getFragmentData(fragments.Account_UserFragment, data);

  return (
    <div>
      {data && (
        <h2>{`Welcome, ${account?.name ?? "Visitor"}!`}</h2>
      )}
    </div>
  );
}

Work in progress

We are working on matching parity with the current Appwrite SDK. After we do so, version numbers will match the currently supported version of the SDK. Until then, please feel free to use what we have finished so far!

Still left to do: