Next.js: type errors with ReferenceLinks

templates/next/components/ReferenceLinks.tsx と、templates/next/components/foo/List.tsx および Show.tsx にある ReferenceLinks の使用箇所から始め、docker compose exec pwa pnpm next build で失敗を再現します。templates/next/types/foo.ts に生成されたオプショナルフィールドを、報告された4つのエラーと比較します。生成された Next.js アプリがこれらの ReferenceLinks の型エラーなしでビルドできれば完了です。

create-client version(s) affected: 0.10.0

Description

After generating an app in the pwa container derived from the standard distribution it works in the development environment but when running

docker compose exec pwa pnpm next build

i get the following type errors:

1. ./components/employee/List.tsx employee["hours"] is possibly 'undefined'.
2. the same error for ./components/employee/Show.tsx
3. ./components/hours/List hours["employee"] Type '{ href: string; name: string | undefined; }' is not assignable to type 'string'
4. The same error is in ./components/hours/Show.tsx

Causes:

1. List component ReferenceLinks if isReferences (and isEmbeddeds?)

This happens because templates/next/types/foo.ts defines all properties as optional so that pwa/types/Employee.ts is generated to define hours like this:

    public hours?: string[],

while on line 42-43 of templates/next/components/foo/List.tsx an undefined field is not addressed:

                {{#if isReferences}}
                  <ReferenceLinks items={ {{{../lc}}}['{{{name}}}'].map((ref: any) => ({ href: getItemPath(ref, '/{{{lowercase reference.title}}}s/[id]'), name: ref })) } />

2. Show component ReferenceLinks if isReferences (and isEmbeddeds?)

Like 1, on line 57-58 of templates/next/components/foo/Show.tsx

3. List component ReferenceLinks if isReference (and isEmbedded?)

This happens because templates/next/types/foo.ts defines all properties as optional while
on line 44-45 of templates/next/components/foo/List.tsx an undefined field is not addressed:
{{else if reference}}
<ReferenceLinks items={ { href: getItemPath({{{../lc}}}['{{{name}}}'], '/{{{lowercase reference.title}}}s/[id]'), name: {{{../lc}}}['{{{name}}}'] } } />

4. Show component ReferenceLinks if isReference (and isEmbedded?)

Similar to 3, line on line 57-58 of templates/next/components/foo/Show.tsx

How to reproduce

Clone MetaClass' Tutorial Api Platform repository using git:

git clone https://github.com/metaclass-nl/tutorial-api-platform.git

check out branch chapter2-next

start the containers with

docker compose up

The api container should execute the data base migrations automatically. If not do:

docker compose exec php ./bin/console doctrine:migrations:migrate

To clear the database and execute the fixtures enter the following command:

docker compose exec php bin/console doctrine:fixtures:load

Follow the instructions from readme.md. or point your browser to the same branch on github
and follow the instructions.

The paragraph "Checking types" describes how to reprocude this error as well as serveral others for wich seperate issues are created.

Possible Solution

The simpelest soloution is to change the type templates/next/components/ReferenceLinks.tsx

interface Props {
  items: 

to allow undefined items and item names.

Alternatively each of the values passed to items can be checked of undefined, like is done in paragraph "Checking types" of the readme of the tutorial branch chapter2-next

Additional Context

Api Platform version v3.1.3

typescript config see pnpm-lock.yaml and tsconfig.json