nuxt-modules / nuxt-modules/strapi

Populate Dynamic Zones type error

Open
#505 0 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
TypeScript
Stars
717
Forks
89
Avg merge
7h 3m
Merged PRs (30d)
6

Description

If I define "populate" for dynamic zones in Strapi as specified on the Strapi Docs page.
Then the type check fails and highlighted in IDE because the "on" definition is not allowed according to Strapi5RequestPopulateParam type.

Version

@nuxtjs/strapi: 2.1.1
nuxt: 4.2.2
Strapi: v5

Steps to reproduce

Create a types, like this:

type TStrapiContentEntry = {
  id: number;
  documentId: string;
};

type TStrapiImage = TStrapiContentEntry & {
  name: string;
  url: string;
  alternativeText: string;
  formats: {
    thumbnail: {
      url: string;
    };
    small?: {
      url: string;
    };
    medium?: {
      url: string;
    };
    large?: {
      url: string;
    };
  };
};


type TSectionHero = TStrapiComponent & {
  __component: 'sections.hero';
  heading: string;
  image: TStrapiImage;
};

export type TSectionGallery = TStrapiComponent & {
  __component: 'sections.gallery';
  heading: string;
  images: TStrapiImage[];
};

type TSection =
  | TSectionHero
  | TSectionGallery;

type TSections = TSection[];

type TPage = TStrapiContentEntry & {
  title: string;
  sections: TSections;
};

then add this script:

const { find } = useStrapi();
const { data } = await find<TPage>('pages', {
      populate: {
        sections: {
          on: {
            'sections.hero': {
              populate: ['image'],
            },
            'sections.gallery': {
              populate: ['images'],
            },
          },
        },
      },
      pagination: {
        page: 1,
        pageSize: 1,
      },
    });
What is Expected?

There should be no warning in IDE (WebStorm).

What is actually happening?

I get the following warning in IDE:

Type sections is not assignable to type Strapi5RequestPopulateParam | undefined
Types of property sections are incompatible.
Object literal may only specify known properties, and on does not exist in type

However code works fine.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start at the Strapi5RequestPopulateParam type used by the useStrapi().find request options, then reproduce the error with the TPage example and dynamic-zone populate object shown here. Verify the type-checking behavior around the sections.on definition; done means the documented Strapi v5 populate form is accepted without an IDE warning while the existing request still works.

Written by the indexing model from the issue text.

Assessment

Tech stack
nuxtjs, typescript
Domain
api, developer-experience
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.