saleor-dashboard/src/searches/useAttributeValueSearch.ts
2023-01-16 10:45:12 +01:00

89 lines
2.1 KiB
TypeScript

import { gql, useApolloClient } from "@apollo/client";
import {
SearchAttributeValuesDocument,
SearchAttributeValuesQuery,
SearchAttributeValuesQueryVariables,
} from "@dashboard/graphql";
import makeSearch from "@dashboard/hooks/makeSearch";
import { mapEdgesToItems } from "@dashboard/utils/maps";
export const searchAttributeValues = gql`
query SearchAttributeValues(
$id: ID
$after: String
$first: Int!
$query: String!
) {
attribute(id: $id) {
id
choices(after: $after, first: $first, filter: { search: $query }) {
edges {
node {
...AttributeValueDetails
}
}
pageInfo {
...PageInfo
}
}
}
}
`;
export function useSearchAttributeValuesSuggestions() {
const client = useApolloClient();
return (id: string, query: string) =>
client
.query<SearchAttributeValuesQuery, SearchAttributeValuesQueryVariables>({
query: SearchAttributeValuesDocument,
variables: {
id,
first: 10,
query,
},
})
.then(({ data }) =>
mapEdgesToItems(data.attribute.choices).map(({ name, slug }) => ({
label: name,
value: slug,
})),
);
}
export default makeSearch<
SearchAttributeValuesQuery,
SearchAttributeValuesQueryVariables
>(SearchAttributeValuesDocument, result => {
if (result.data?.attribute.choices.pageInfo.hasNextPage) {
result.loadMore(
(prev, next) => {
if (
prev.attribute.choices.pageInfo.endCursor ===
next.attribute.choices.pageInfo.endCursor
) {
return prev;
}
return {
...prev,
attribute: {
...prev.attribute,
choices: {
...prev.attribute.choices,
edges: [
...prev.attribute.choices.edges,
...next.attribute.choices.edges,
],
pageInfo: next.attribute.choices.pageInfo,
},
},
};
},
{
...result.variables,
after: result.data.attribute.choices.pageInfo.endCursor,
},
);
}
});