Content: How to handle search properly - different result observed

[rajesh-h]

Reproduction link - https://codesandbox.io/s/github/rajesh-h/cs_content

quick reproduction:
Click on search icon -> enter text -> Pressure -> Click enter/search
You will get result with only one article

https://sj1bl.sse.codesandbox.io/search/pressure - you will get more than one result

Details:
What happens when you click on search?
Search input is present in header component
It invokes a method which will push the navigation to baseurl/search/{slug}

When I put the direct url I get more results.

search logic handled here

I am sure I might be doing something weird, but unable to get around it.

Your help is much appreciated.

[rajesh-h]

I see problem might be at where I handle $fetch hook.

when we enter direct URL it runs on server so all goes well. But on client side same effect is not observed :(

Not sure how to handle this properly

[dtmzr]

Hey there, I removed this

      .skip(this.skipCnt)
      .limit(this.limitCnt)

from your query within MainBlock.vue. It seemed to help and your app delivered the right content in that case.

I guess the pagination mechanism has an unexpected side effect, let me know if you need help looking into it. :)

Heres the example:
https://codesandbox.io/s/nuxt-content-95-x4uyq?file=/pages/index.vue
(Note: due to removing skip/limit the infinite scroll is messed up in this example.)

[rajesh-h]

@dtmzr Thank you very much for looking into it. Never thought this will be attended by anyone.

I think .limit() creates this issue only when you use along with .search() or .where() conditions.

Why I go with pagination mode is, lets say someone searches for word "veg" I have many tittles which has "veg" in it, so I want to show only 10 posts. so the page loads faster, also related images gets loaded only when the user wants to go down, else I might use my bandwidth of downloading 100 images which is unnecessary. Loading only when user goes down the screen saves the bandwidth in terms of users data as well.

Do you have any other way to manage this?

Thanks

[dtmzr]

I looked a little further into it but sadly couldn't resolve the issue.
In your case it seems to go wrong when the client tries to fetch this data, the server seems to retrieve it correctly.

You'll notice that if you reload the page - then the correct data should be in place.

I'll try to create a minimal poc to see if this is an implementation issue.

[rajesh-h]

Yes I agree with you and realized it happens at client side.
One more thing is this behavior is not observed when I run as offline static site. after yarn generate then yarn serve.

Problem is during development SSR. If you can look into it that will be really helpful.

[realityfilter]

I stumbled upon this while adding limit(n) to my query as well. In middleware.js limit and skip are getting applied before the where clause. This seems to be a bug. See:
https://github.com/nuxt/content/blob/c5a11fc166fdec2d5cd4cbcc6880917ff861c047/lib/middleware.js#L76-L104

[dtmzr]

@realityfilter so skip and limit probably should be at the very end?

Gonna try it out later and create a PR if it solves the issue. :)

[realityfilter]

Yes. So you can paginate results matching a specific criteria.

[dtmzr]

Hey folks,
@benjamincanac just informed me within #267 that this issue should be fixed by #238. So we should be good to go after the next release.

@rajesh-h I tried out your app with the current dev version of content and everything worked as you would expect. 🙏

[rajesh-h]

Thank you @dtmzr and @benjamincanac for keeping it rolling. Well Done !!!