How to implement a simple search-button?
We are quite new to solid, so a big sorry, if this question is repetitive, but I was not able to find a satisfying answer to our problem, yet.
There are some controlled input-fields like selects, etc. which are stored / managed in a createStore and provided via a createContext.
Those values have to be used in a fetch-function as query-params.
My initial thought was to use createResource to manage the data, and use those reactive values as a source.
There are two problems to this solution:
1. The fetcher-function is called on mount, or when it is rendered or whatever. We do not want this. The user has to initiate the fetching.
2. As soon something changes in the input fields, or let´s say, the user changes his filter settings, the data is refetched again. We do not want this. The user has to explicitly press "Show Results" again before we trigger a refetch.
I´ve built up a little example, without the store etc. as it is not part of the question.
It can be found on this playground:
https://playground.solidjs.com/anonymous/d80fb752-2732-4d65-a141-86bca13d95e8
Hope someone can help, with that!
Cheers,
Levin
Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
5 Replies
1. if the source in createResource returns false, the fetcher will not be called.
2. use a debounce for updates.
3. additionally, use a cache, e.g. using makeCache from
@solid-primitives/resource, to avoid duplicate requests for the same search term.Thanks for the fast reply!
So I need to add a trigger-signal, which is false by default and set it to true onClick?
When the user now changes something again, due to the trueish trigger-signal we would have an automatic refetch again.
Do I now need to set the trigger the false, if one of the inputs change?
https://playground.solidjs.com/anonymous/90b60f43-578a-4b6b-8d45-60f9048b4582
That´s what I´ve got so far.
Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
No, you need a memo of the search term or null if nothing should be searched yet.
Thanks for your advices. I think I made it work, even if it still feels a little hackey...