nuxt / content

The file-based CMS for your Nuxt application, powered by Markdown and Vue components.
https://content.nuxt.com
MIT License
3.13k stars 628 forks source link

QueryBuilderParams type error #1522

Open eduardosada opened 2 years ago

eduardosada commented 2 years ago

Environment


Reproduction

https://stackblitz.com/edit/nuxt-starter-eqgbnv?file=pages%2Findex.vue

Describe the bug

The where property on Type QueryBuilderParams is incorrectly marked as an array.

Consider the following code:

<script setup lang="ts">
import type { QueryBuilderParams } from '@nuxt/content/dist/runtime/types';

let query: QueryBuilderParams = {
  where: { _draft: { $eq: false } },
};
</script>

Running nuxi typecheck will throw an error:

Nuxi 3.0.0-rc.9
pages/index.vue:13:12 - error TS2322: Type '{ _draft: { $eq: false; }; }' is not assignable to type 'QueryBuilderWhere[]'.
  Object literal may only specify known properties, and '_draft' does not exist in type 'QueryBuilderWhere[]'.

13   where: { _draft: { $eq: false } },
              ~~~~~~~~~~~~~~~~~~~~~~

  node_modules/@nuxt/content/dist/runtime/types.d.ts:418:3
    418   where?: QueryBuilderWhere[]
          ~~~~~
    The expected type comes from property 'where' which is declared here on type 'QueryBuilderParams'

Found 1 error in pages/index.vue:13

Additional context

No response

Logs

No response

farnabaz commented 2 years ago

Just wrap your condition in an array.

<script setup lang="ts">
import type { QueryBuilderParams } from '@nuxt/content/dist/runtime/types';

let query: QueryBuilderParams = {
  where: [{ _draft: { $eq: false } }],
};
</script>

The where field in the QueryBuilderParams is an array. We have done this especially to simplify joining multiple conditions.

eduardosada commented 2 years ago

Thanks @farnabaz

Try it yourself:

https://stackblitz.com/edit/nuxt-starter-xzi3df?file=pages%2Findex.vue

If you put where: [{ _draft: { $eq: false } }], doesn't throw a type error but the filter doesn't work. If you put where: { _draft: { $eq: false } }, the filter is working but the type check is failing.

farnabaz commented 2 years ago

I see, thanks for clarifying. I've missed that you are using ContentList.

Types should update to fix this.