PickBazar React Documentation
WelcomeHow It WorksInstallation
Features
Available ScriptsCustomizationStyles and Assets
Back-End Integration
API integrationData FetchingFor GraphQLFor REST APIAPI Documentation
Deployment
Settings
TranslationNew PageFAQSupportVersions

[your-frontend-project] = admin [rest/graphql] or shop

For GraphQL

We have used GraphQL Query and Mutation which is defined in

cd [your-frontend-graphql-project]/src/graphql/

For details documentation:

  • Apollo Client
  • GraphQL Let

You can check and customize it as your need.

Uses Example:

  • Query
import {
  useOrdersQuery,
  OrdersDocument,
  OrderDocument,
  OrdersOrderByColumn,
  SortOrder,
} from "@graphql/orders.graphql";


// Fetch list of orders


const { data, error, loading, fetchMore } = useOrdersQuery({
  variables: {
    orderBy: [{ field: OrdersOrderByColumn.CreatedAt, order: SortOrder.Desc }],
    first: 10,
    page: 1,
    customer_id: 1,
  },
});


fetchMore({
  variables: {
    page,
    first,
  },
});


// Fetch Single Order


const { data, error, loading } = useOrderQuery({
  variables: {
    id,
    tracking_number,
  },
});
  • Mutation
import {
  useCreateCouponMutation,
  useUpdateCouponMutation,
  useDeleteCouponMutation,
  CouponInput,
  CouponUpdateInput,
  CouponType,
} from "@graphql/coupons.graphql";


const [createCoupon] = useCreateCouponMutation();
const [updateCoupon] = useUpdateCouponMutation();
const [deleteCoupon] = useDeleteCouponMutation();


const handleSubmit = async () => {
  const createInput = {
    code: "eid50",
    amount: 50,
    active_from: "2020-12-20 13:43:32",
    expire_at: "2020-12-30 13:43:32",
    type: CouponType.FixedCoupon,
  };
  const { data, error, loading } = await createCoupon({
    variables: { input: createInput },
  });
  const updateInput: CouponUpdateInput = {
    code: "eid50",
    amount: 100,
    active_from: "2020-12-20 13:43:32",
    expire_at: "2020-12-30 13:43:32",
    type: CouponType.FixedCoupon,
  };
  const { data, error, loading } = await updateCoupon({
    variables: { id: 22, input: updateInput },
  });
  const { data, error, loading } = await deleteCoupon({
    variables: { id: 22 },
  });
};

For REST API

We have used React Query and Axios which is defined in

[your-frontend-rest-project]/src/data/

For details documentation:

  • React-Query You can check and customize it as your need.

Uses Example:

  • Query
import { useProductsQuery } from "@data/product/use-products.query";


const {
  isFetching: loading,
  isFetchingNextPage: loadingMore,
  fetchNextPage,
  hasNextPage,
  isError,
  data,
  error,
} = useProductsQuery({
  type: "grocery",
  text: "",
  category: "grocery",
});
  • Mutation
import { useCreateProductMutation } from "@data/product/product-create.mutation";


const {
  mutate: createProduct,
  isLoading: creating,
} = useCreateProductMutation();


function handleSubmit(inputVaues) {
  createProduct(
    {
      ...inputValues,
    },
    {
      onError: (error: any) => {
        Object.keys(error?.response?.data).forEach((field: any) => {
          setError(field, {
            type: "manual",
            message: error?.response?.data[field][0],
          });
        });
      },
    }
  );
}