Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Fix filtering by categories and collections #136

Merged
merged 3 commits into from
Dec 30, 2024
Merged

fix: Fix filtering by categories and collections #136

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6022e6d
fix: Fix filtering by category and collection
soniaklimas Dec 20, 2024
6f48b2d
Use graphql directives
soniaklimas Dec 24, 2024
4c66206
Implement review
soniaklimas Dec 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions apps/storefront/src/app/[locale]/(main)/search/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,8 @@ export default async function Page(props: { searchParams: SearchParams }) {
sortBy = DEFAULT_SORT_BY,
q: query = "",
limit,
category,
collection,
...rest
} = searchParams;
const { results, pageInfo } = await searchService.search(
Expand All @@ -77,6 +79,8 @@ export default async function Page(props: { searchParams: SearchParams }) {
before,
sortBy,
filters: rest,
category,
collection,
},
searchContext,
);
Expand Down
38 changes: 38 additions & 0 deletions ...astructure/src/public/saleor/search/graphql/queries/SearchProductsByCategoryQuery.graphql
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
query SearchProductByCategoryQuery(
Copy link
Collaborator

Choose a reason for hiding this comment

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

check this section https://graphql.org/learn/queries/#directives and extend SearchProductQuery depending on the query's argument named e.g. $searchBy = "category" | "collection" | undefined to create the query response fields dynamically. With that, you can have a single search query with many outputs depending on the URL search param instead of now 3 and having multiple if conditions in your render function. And check if you can reuse GraphQL Fragments because you've repeated in each new query the products query when it should be reused as a Fragment (stored ready-to-use Products Query).

$after: String
$before: String
$channel: String!
$filter: ProductFilterInput
$first: Int
$last: Int
$sortBy: ProductOrder
$languageCode: LanguageCodeEnum!
$where: ProductWhereInput
$slug: String
) {
category(slug: $slug) {
products(
after: $after
before: $before
channel: $channel
filter: $filter
first: $first
last: $last
sortBy: $sortBy
where: $where
) {
edges {
node {
...SearchProductFragment
}
}
pageInfo {
startCursor
endCursor
hasNextPage
hasPreviousPage
}
totalCount
}
}
}
37 changes: 37 additions & 0 deletions ...tructure/src/public/saleor/search/graphql/queries/SearchProductsByCollectionQuery.graphql
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
query SearchProductByCollectionQuery(
$channel: String!
$after: String
$before: String
$filter: ProductFilterInput
$first: Int
$last: Int
$sortBy: ProductOrder
$languageCode: LanguageCodeEnum!
$where: ProductWhereInput
$slug: String
) {
collection(slug: $slug, channel: $channel) {
products(
after: $after
before: $before
filter: $filter
first: $first
last: $last
sortBy: $sortBy
where: $where
) {
edges {
node {
...SearchProductFragment
}
}
pageInfo {
startCursor
endCursor
hasNextPage
hasPreviousPage
}
totalCount
}
}
}
Loading
Loading