Table
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.
npm install @airsoko/graphql
- Node.js (version 16 or higher)
- npm (or yarn)
If you wish to uninstall Airsoko next, use:
npm uninstall @airsoko/graphql
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;
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>) => {
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;
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,
},
};
};
- 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();
};
Contributions to improve this package are welcome. Please adhere to the project's coding standards and commit guidelines.
MIT License
-
π This README was generated with π by Airsoko