How to retrieve all items in an index on page load?

I am using Vue JS and the associated Vue JS Algolia components shown here:

https://v2–vue-instantsearch.netlify.com/components/instantsearch

I have my search system set up with:

  • Keyword search
  • Refinements list
  • Toggle refinement

On first load of my application, all toggles are set off and so my item (I only have one right now) does not display until I select a toggle that matches one of its facets, first (a boolean for “bills included”).

What I would ideally like is that on the first load of the app, that Algolia retrieves all of my items without any search provided criteria but sorted by newest first.

The reason I want this is so that the user can drill down as they like only after being presented with everything available.

At the moment it seems like a search is applied immediately on load.

Is there a way to configure this behaviour at all?

The issue mainly appears to be with the “toggle refinement” components. I guess that makes sense because they are either on or off. If that has to be the case, is there another way I can only apply these after a search is made first?

Hope that all makes sense. Thank you!

Hi there,

Could you create a https://codesandbox.io demo using the Vue Template found at the link below so that we may assist. https://github.com/algolia/create-instantsearch-app#previews

Thanks in advance. I look forward to your reply!
Best Regards,

Hi Jason

Thanks for the reply…I’ve set up a basic stripped-back CodeSandbox here:

Items will only show if you select both “has images” and “bills included”.

I would ideally like to present the page initially with all items showing and THEN you filter down.

I guess this is to do with those toggle refinement’s being boolean types? In other words, both posts are set true on the above facets but false for everything else, so I’m not sure how I’d get around that.

As an aside…is there any way to set the initial value of a toggle refinement field or other fields?

On page load, they’re all set to false. It’d be nice to be able to select the best preferences as I see fit first. I couldn’t see in the docs how to do this!

Thanks
Michael

You’re right. That’s how toggles work when you define the prop off=false.
If you want the off state of the checkbox to translate into “no filter”, than just omit the off prop.

I updated your code sample.