Skip to content

Commit

Permalink
build(storefront): 🍻 attempted pagination
Browse files Browse the repository at this point in the history
  • Loading branch information
@sahrohit
sahrohit committed Aug 7, 2023
1 parent d909524 commit 3c83727
Show file tree
Hide file tree
Showing 6 changed files with 153 additions and 39 deletions.
2 changes: 2 additions & 0 deletions apps/admin/src/generated/graphql.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -471,6 +471,8 @@ export type QueryPromoArgs = {
};

export type QueryQueryProductsArgs = {
limit?: InputMaybe<Scalars["Float"]>;
offset?: InputMaybe<Scalars["Float"]>;
query: Scalars["String"];
};

Expand Down
36 changes: 31 additions & 5 deletions apps/api/src/resolvers/product.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,15 @@ class ProductSummary {
count!: number;
}

@ObjectType()
class PaginatedProducts {
@Field(() => [Product])
products!: Product[];

@Field(() => Boolean)
hasMore!: boolean;
}

@Resolver(Product)
export class ProductResolver {
@Query(() => ProductSummary, { nullable: true })
Expand Down Expand Up @@ -54,8 +63,14 @@ export class ProductResolver {
.getMany();
}

@Query(() => [Product], { nullable: true })
async queryProducts(@Arg("query") query: string): Promise<Product[]> {
@Query(() => PaginatedProducts, { nullable: true })
async queryProducts(
@Arg("query") query: string,
@Arg("limit", { nullable: true }) limit?: number,
@Arg("offset", { nullable: true }) offset?: number
): Promise<PaginatedProducts> {
const realLimit = Math.min(30, limit ?? 30);
const realLimitPlusOne = realLimit + 1;
try {
const variants = JSON.parse(query);

Expand Down Expand Up @@ -84,7 +99,7 @@ export class ProductResolver {
});
});

return await Product.find({
const products = await Product.find({
relations: {
inventories: true,
images: true,
Expand All @@ -104,10 +119,16 @@ export class ProductResolver {
isPublished: true,
},
},
take: realLimitPlusOne,
skip: offset ?? 0,
});

return {
products: products.slice(0, realLimit),
hasMore: products.length === realLimitPlusOne,
};
} catch (error) {
console.error(error);
return await Product.find({
const products = await Product.find({
relations: {
inventories: true,
images: true,
Expand All @@ -123,6 +144,11 @@ export class ProductResolver {
},
},
});

return {
products: products.slice(0, realLimit),
hasMore: products.length === realLimitPlusOne,
};
}
}

Expand Down
63 changes: 41 additions & 22 deletions apps/storefront/src/generated/graphql.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -295,6 +295,12 @@ export type OrderItem = {
updated_at: Scalars["String"];
};

export type PaginatedProducts = {
__typename?: "PaginatedProducts";
hasMore: Scalars["Boolean"];
products: Array<Product>;
};

export type PaymentDetail = {
__typename?: "PaymentDetail";
amount: Scalars["Float"];
Expand Down Expand Up @@ -445,7 +451,7 @@ export type Query = {
products?: Maybe<Array<Product>>;
productsSummary?: Maybe<ProductSummary>;
promo?: Maybe<Promo>;
queryProducts?: Maybe<Array<Product>>;
queryProducts?: Maybe<PaginatedProducts>;
reviewByUserAndProduct?: Maybe<ProductReview>;
reviewSummary?: Maybe<ReviewSummaryResponse>;
reviews?: Maybe<Array<ProductReview>>;
Expand All @@ -471,6 +477,8 @@ export type QueryPromoArgs = {
};

export type QueryQueryProductsArgs = {
limit?: InputMaybe<Scalars["Float"]>;
offset?: InputMaybe<Scalars["Float"]>;
query: Scalars["String"];
};

Expand Down Expand Up @@ -2262,21 +2270,27 @@ export type ProductsQuery = {

export type QueryProductsQueryVariables = Exact<{
query: Scalars["String"];
limit?: InputMaybe<Scalars["Float"]>;
offset?: InputMaybe<Scalars["Float"]>;
}>;

export type QueryProductsQuery = {
__typename?: "Query";
queryProducts?: Array<{
__typename?: "Product";
id: number;
identifier: string;
name: string;
images: Array<{ __typename?: "ProductImage"; imageURL: string }>;
inventories?: Array<{
__typename?: "ProductInventory";
price: number;
}> | null;
}> | null;
queryProducts?: {
__typename?: "PaginatedProducts";
hasMore: boolean;
products: Array<{
__typename?: "Product";
id: number;
identifier: string;
name: string;
images: Array<{ __typename?: "ProductImage"; imageURL: string }>;
inventories?: Array<{
__typename?: "ProductInventory";
price: number;
}> | null;
}>;
} | null;
};

export type SearchProductsQueryVariables = Exact<{
Expand Down Expand Up @@ -4471,16 +4485,19 @@ export type ProductsQueryResult = Apollo.QueryResult<
ProductsQueryVariables
>;
export const QueryProductsDocument = gql`
query QueryProducts($query: String!) {
queryProducts(query: $query) {
id
identifier
name
images {
imageURL
}
inventories {
price
query QueryProducts($query: String!, $limit: Float, $offset: Float) {
queryProducts(query: $query, limit: $limit, offset: $offset) {
hasMore
products {
id
identifier
name
images {
imageURL
}
inventories {
price
}
}
}
}
Expand All @@ -4499,6 +4516,8 @@ export const QueryProductsDocument = gql`
* const { data, loading, error } = useQueryProductsQuery({
* variables: {
* query: // value for 'query'
* limit: // value for 'limit'
* offset: // value for 'offset'
* },
* });
*/
Expand Down
23 changes: 13 additions & 10 deletions apps/storefront/src/graphql/query/product/queryProducts.graphql
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@
query QueryProducts($query: String!) {
queryProducts(query: $query) {
id
identifier
name
images {
imageURL
}
inventories {
price
query QueryProducts($query: String!, $limit: Float, $offset: Float) {
queryProducts(query: $query, limit: $limit, offset: $offset) {
hasMore
products {
id
identifier
name
images {
imageURL
}
inventories {
price
}
}
}
}
25 changes: 24 additions & 1 deletion apps/storefront/src/pages/_app.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,30 @@ const App = ({ Component, pageProps }: AppProps) => {

const client = new ApolloClient({
uri: process.env.NEXT_PUBLIC_API_URL,
cache: new InMemoryCache(),
cache: new InMemoryCache({
// ! Pagination is working, but filtering stops working after this
// typePolicies: {
// Query: {
// fields: {
// queryProducts: {
// keyArgs: [],
// merge(
// existing: PaginatedProducts | undefined,
// incomming: PaginatedProducts
// ): PaginatedProducts {
// return {
// ...incomming,
// products: [
// ...(existing?.products || []),
// ...incomming.products,
// ],
// };
// },
// },
// },
// },
// },
}),
credentials: "include",
});

Expand Down
43 changes: 42 additions & 1 deletion apps/storefront/src/pages/products/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ import { Box, HStack, SimpleGrid, Spinner } from "@chakra-ui/react";
import { useState } from "react";

const ProductFilterPage = () => {
// const ref = useRef(null);
// const isInView = useInView(ref);
const { data, loading, error } = useVariantsQuery();

const [selectedVariant, setSelectedVariant] = useState<
Expand All @@ -32,9 +34,30 @@ const ProductFilterPage = () => {
} = useQueryProductsQuery({
variables: {
query: JSON.stringify(selectedVariant),
limit: 12,
offset: 0,
},
});

// useEffect(() => {
// if (isInView && products?.queryProducts?.hasMore) {
// fetchMore({
// variables: {
// query: JSON.stringify(selectedVariant),
// limit: 6,
// offset: products?.queryProducts?.products?.length,
// },
// });
// }
// // eslint-disable-next-line react-hooks/exhaustive-deps
// }, [
// fetchMore,
// isInView,
// pLoading,
// products?.queryProducts?.hasMore,
// selectedVariant,
// ]);

if (error)
return (
<Result
Expand Down Expand Up @@ -101,10 +124,28 @@ const ProductFilterPage = () => {
dump={pError.stack}
/>
) : (
products?.queryProducts?.map((product) => (
products?.queryProducts?.products.map((product) => (
<ProductCard key={product.id} product={product as Product} />
))
)}
{/* {products?.queryProducts?.hasMore && (
<Button
onClick={async () => {
await fetchMore({
variables: {
query: JSON.stringify(selectedVariant),
limit: 6,
offset: products?.queryProducts?.products.length,
},
});
}}
>
Fetch More
</Button>
)} */}
{/* <HStack ref={ref} w="full" justifyContent="center">
{!pLoading && products?.queryProducts?.hasMore && <Spinner />}
</HStack> */}
</ProductGrid>
</SimpleGrid>
</Box>
Expand Down

2 comments on commit 3c83727

@vercel
Copy link

@vercel vercel bot commented on 3c83727 Aug 7, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

ecommerce-storefront-client – ./apps/storefront

ecommerce-storefront-client-git-main-sahrohit.vercel.app
www.rudejellyfish.live
hamropasal.vercel.app
ecommerce-storefront-client-sahrohit.vercel.app
rudejellyfish.live

@vercel
Copy link

@vercel vercel bot commented on 3c83727 Aug 7, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

ecommerce-admin-client – ./apps/admin

ecommerce-admin-client-git-main-sahrohit.vercel.app
ecommerce-admin-client-sahrohit.vercel.app
ecommerce-admin-client.vercel.app

Please sign in to comment.