Packages
graphql
Installation

Installation

To install the Airsoko GraphQL package, follow these steps:

  1. Open your terminal.
  2. Navigate to your project directory.
  3. Run the following command:
npm install @airsoko/graphql

Wrap the Application with AirsokoGraphqlProvider

To enable graphql within your React application, you need to wrap it with the AuthProvider component provided by the package. This component sets up the necessary 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

Now that the package is installed and configured, you can start using it in your project. Here's a basic example of how to query data using Airsoko GraphQL:

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 onSetDefault = async (id: string) => {
  await client.address.setAsDefault({ id: id });
  refetch();
};
 
const onDelete = async (id: string) => {
  await client.address.delete({ id: id });
  refetch();
};

Server-Side Usage example:

import { ProductQuery, Product } from "@airsoko/graphql";
import client from "@airsoko/graphql/client";
import { ProductProvider } from "@airsoko/react";
import { GetServerSideProps, InferGetServerSidePropsType } from "next";
 
const ProductDisplayPage = ({ data }: InferGetServerSidePropsType<typeof getServerSideProps>) => {
  return <div>{data.product.name}</div>;
};
export default ProductDisplayPage;
 
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",
    }
  );
  return {
    props: {
      data: data,
    },
  };
};

Conclusion

Congratulations! You've successfully set up and used the Airsoko GraphQL package in your project. Feel free to explore more features and capabilities offered by the package.

If you encounter any issues or have questions, refer to the Airsoko documentation or reach out to their support team for assistance.