I want to configure a filter system for my website, and I’m struggling for the best solution.
I’m using apollo client 3 and Strapi 4.
My main problem is to set the default “all” filter.
Here is my code
//Query with tag
export const PROJECTS_TAG = gql`
${projectDetailFragment}
query projects($tag: String!) {
projects(
sort: "createdAt:desc"
filters: { tags: { name: { eq: $tag } } }
) {
data {
id
attributes {
...projectDetailFragment
}
}
}
}
`;
...
//I want to find a solution to configure default tag for all.
const [tag, settag] = useState("");
const { data, loading, error} = useQuery(PROJECTS_TAG, {
variables: { tag },
});
//A button with a specific tag
<Button
onClick={() => settag("Geothermal")}
value="Geothermal"
></Button>
This works fine when I give tag an existing value, but I want to have a default query and an “all” button. Like this :
<Button
onClick={() => settag("*")}
value="All"
></Button>
But of course, it didn’t work like this.