Airsoko graphql package

📑 Table of Contents

• Overview

• Installation

  • Prerequisites
  • Installation
  • Using Airsoko
  • Updating
  • Uninstallation

• 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();
};

Functions

🤝 Contributing

Contributions to improve this package are welcome. Please adhere to the project's coding standards and commit guidelines.

License

MIT License

⚒️ Built With

• 

• 

  ---

  🌟 This README was generated with 💖 by Airsoko