@airsoko/graphql NPM

Airsoko graphql package

📑 Table of Contents

Overview
Installation
API Reference
License
Built With

Overview

The @airsoko/graphql package provides components and utilities for GraphQL operations, including Apollo Client configurations, models for various entities, and utility functions. This README will guide you through the installation and usage of this package.

Installation

npm install @airsoko/graphql

Prerequisites

Node.js (version 16 or higher)
npm (or yarn)

Uninstalling

If you wish to uninstall Airsoko next, use:

npm uninstall  @airsoko/graphql

API Reference

Example

Step 1: Wrap the Application with `AirsokoGraphqlProvider` and `useApollo`

To enable graphql within your React application, you need to wrap it with the AuthProvider component provided by the Macive apollo client package. This component sets up the necessary apollo context, allowing your components to access states including the cache and client states.

Here's an example of how to use the AuthProvider and useApollo:

import { useApollo,AirsokoGraphqlProvider } from "@airsoko/graphql/apollo";
import { AppProps } from "next/app";

const MyApp: React.FC<AppProps> = ({ Component, pageProps }) => {
  const apolloClient = useApollo(pageProps);

  return (
    <AirsokoGraphqlProvider client={apolloClient}>
      {/* The rest of your application */}
      <Component {...pageProps} />
    </AirsokoGraphqlProvider>
  );
};

export default MyApp;

Usage

Server-Side Usage Example

1. Import Dependencies:

import { ProductQuery, Product } from "@airsoko/graphql";
import client from "@airsoko/graphql/client";
import { ProductProvider } from "@airsoko/react";
import { GetServerSideProps, InferGetServerSidePropsType } from "next";

3. Create Product Display Page:

const ProductDisplayPage = ({ data }: InferGetServerSidePropsType<typeof getServerSideProps>) => {
  if (!data?.product) {
    return null;
  }

  return (
    <div className="x-bg-white">
      <ProductProvider data={data?.product}>
        <ProductPageV1
          product={data?.product as Product}
        ></ProductPageV1>
      </ProductProvider>
    </div>
  );
};
export default ProductDisplayPage;

3. Server-Side Data Fetching:

export const getServerSideProps: GetServerSideProps<{ data: ProductQuery }> = async ({ query }) => {
  const { handle } = query;
  const { data, error } = await client.product.get(
    { handle: handle as string },
    {
      fetchPolicy: "network-only",
    }
  );

  if (error) {
    throw new Error(error.message);
  }

  if (!data?.product) {
    return {
      notFound: true,
    };
  }

  return {
    props: {
      data: data,
    },
  };
};

Client-Side Usage Example

example on query

import { CustomerAddress, useGetCustomerAddressesQuery } from "@airsoko/graphql";

const { data, refetch, loading } = useGetCustomerAddressesQuery();

example on mutation

import client from "@airsoko/graphql/client";

const { data, refetch, loading } = useGetCustomerAddressesQuery();
const type = "billing";

const onSetDefault = async (id: string) => {
  await client.address.setAsDefault({ id: id });
  refetch();
};

const onDelete = async (id: string) => {
  await client.address.delete({ id: id });
  refetch();
};