[DX] Refactor useAlgoliaSearch composable

[Baroshem]

Hey folks!

I recently added a support for SSR requests to Algolia and I liked the experience so I decided to go a little deeper and work on the current useAlgoliaSearch composable to improve Developer Experience.

Currently, this is how we are using the composable on client side:

const { result, search } = useAlgoliaSearch('test_index'); // pass your index as param
onMounted(async () => {
  await search({
    query: 'Samsung',
  });
});

It works quite well but I have been thinking about refactoring it to something like this:

onMounted(async () => {
  const { data, pending, error } = await useAlgoliaSearch({ indexName: 'test_index', query: 'Samsung' });
});

It would be more aligned with current implementation of useAsyncData and useAsyncAlgoliaSearch. The functionality would not change and this new composable would work for other client use cases as well (like search bar).

[Baroshem]

I would appreciate the feedback from @danielroe @timbenniks @chuckmeyer :)

[danielroe]

In general, I would say that Vue composables (use*) should only be called in the setup function and not later, for example, in onMounted. I would suggest instead:

const { data, pending, error } = useAlgoliaSearch({ indexName: 'test_index', query: 'Samsung' });

And under the hood it can call onMounted; pending will be true until the search has run.

[Baroshem]

I see, but currently, when you destructure search, you can use it also in events (i.e. @click on button with input that contains a query).

If I get that right, you would not use something like this?

<input @change="useAlgoliaSearch(params)" />

This is a valid point and this suggests me not to modify the current composable so that it is not mixing the approaches and patterns.