Filtering by parameter

I have a backend in Laravel and rendering a vue-instantsearch inside a blade file.

@extends('layout._base')

@section('content')
    <ais-index
        app-id="{{ config('scout.algolia.id') }}"
        api-key="{{ config('scout.algolia.public') }}"
        index-name="patterns"
        id="app"
        query="{{ request('q') }}"
    >
        <div class="row">
            <div class="col">
                <ais-results>
                    <template slot-scope="{ result }">
                        <div class="card" v-if="@json(Auth::user()->id) == result.user_id">
                            <div class="card-header">
                                <a :href="result.path">
                                    <ais-highlight :result="result" attribute-name="name"></ais-highlight>
                                </a>
                            </div>
                            <div class="card-body">
                                <ais-highlight :result="result" attribute-name="description"></ais-highlight>
                            </div>
                        </div>
                        <p>
                        </p>
                    </template>
                </ais-results>
            </div>
            <div class="col-3">
                <div class="card mb-5">
                    <div class="card-header font-weight-bold">Search</div>
                    <div class="card-body">
                        <ais-input placeholder="Search patterns..." class="form-control" :autofocus="true"></ais-input>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header">
                        Filter By Category
                    </div>
                    <div class="card-body">
                        <ais-refinement-list attribute-name="category"></ais-refinement-list>
                    </div>
                </div>
            </div>
        </div>
    </ais-index>
@endsection

In line 15 I have a condition to match the user_id with the current user logged in in the app. The condition is filtering properly but the downside of this is that…

1. Everything is getting fetch from algolia regardless.
2. Attributes for faceting are rendered with all fetched records so the faceting doesn’t match with records rendered.

Algolia data looks like this…

name: "Test"
brand: "Test Brand"
description: "This is an awesome description"
category: "accessories"
user_id: 3
objectID: "App\Pattern::17"
path: "patterns/17"
_tags: ["App\Pattern::17"]

I know that algolia has no knowledge of relationship whatsoever. I was hoping to filter the results by pushing the FK but this approach is not optimal.

What other approaches I can take to accomplish this?

[tiois]

@diazgilberto I had the same problem, I figured out that you have to add the attributes you want to filter on to the Index configuration on the Algolia website. In your Index, go to the “Configuration” tab, then “Facets” (even though we’re not using facets), and add the attributes you want to filter on in the “Attributes for faceting” zone and select “Filter only” for these attributes. This is how I ended solving this problem.

Hope this helps!

[redeemefy]

@Haroenv the app is minimal already. The data is toy data and the app is fairly small. Interestingly, with the filters: user_id: ... parameter passed to the XHR request I’m not getting any data back.

Here are the patterns data in algolia

Here the patterns data in my database

and I’m logged in with user_id 1.

the blade.php file

@extends('layout._base')

@section('content')
    <ais-index
        app-id="{{ config('scout.algolia.id') }}"
        api-key="{{ config('scout.algolia.public') }}"
        index-name="patterns"
        id="app"
        query="{{ request('q') }}"
        :query-parameters="{
            filters: 'user_id: @json(Auth::user()->id)'
          }"
    >
        <div class="row">
            <div class="col">
                <ais-results>
                    <template slot-scope="{ result }">
                        <div class="card">
                            <div class="card-header">
                                <a :href="result.path">
                                    <ais-highlight :result="result" attribute-name="name"></ais-highlight>
                                </a>
                            </div>
                            <div class="card-body">
                                <ais-highlight :result="result" attribute-name="description"></ais-highlight>
                            </div>
                        </div>
                        <p>
                        </p>
                    </template>
                </ais-results>
            </div>
            <div class="col-3">
                <div class="card mb-5">
                    <div class="card-header font-weight-bold">Search</div>
                    <div class="card-body">
                        <ais-input placeholder="Search patterns..." class="form-control" :autofocus="true"></ais-input>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header">
                        Filter By Category
                    </div>
                    <div class="card-body">
                        <ais-refinement-list attribute-name="category"></ais-refinement-list>
                    </div>
                </div>
            </div>
        </div>
    </ais-index>
@endsection

the XHR request

As you can see, the filters: user_id: 1 is getting passed in the request.