It performs a client-side GraphQL query. I used urql on the client side instead of Apollo because urql is smaller and published as standard JS modules (except for some process.env calls). The integration point is quite small and can be swapped out. If we keep it we need to move the client to a common location and probably want to wrap it in a controller.
There are a bunch of rough edges here intentionally. To make sharable links and edit-refresh development easier I added a ?query= query param, but didn't yet use a router to read and write it. The styling is made to be obviously sketch-quality, but I added an "icon" to hint at what kind of presentation we might want.
Being able to show links to all elements imported in the bootstrap import uncovers some bugs - many elements display an error on their page. The Shoelace components work though.
This is a very basic UI with one search field.
It performs a client-side GraphQL query. I used urql on the client side instead of Apollo because urql is smaller and published as standard JS modules (except for some
process.envcalls). The integration point is quite small and can be swapped out. If we keep it we need to move the client to a common location and probably want to wrap it in a controller.There are a bunch of rough edges here intentionally. To make sharable links and edit-refresh development easier I added a
?query=query param, but didn't yet use a router to read and write it. The styling is made to be obviously sketch-quality, but I added an "icon" to hint at what kind of presentation we might want.Being able to show links to all elements imported in the bootstrap import uncovers some bugs - many elements display an error on their page. The Shoelace components work though.
Here's a preview: