reactjs - TypeScript med Relay: Kan ikke finde genereret modul

I min MessageItem.tsx komponent har jeg følgende kode:

const data = useFragment(
    graphql`
      fragment MessageItem_message on Message {
        date
        body
      }
    `,
    message as any
  );

Efter at have kørt relay-compiler --src ./src --schema ../../schema.graphql --language typescript --artifactDirectory ./src/__generated__, bliver en modul ved navn MessageItem_message.graphql.ts genereret.

Men når jeg kører appen, giver den mig en fejl:

Kunne ikke kompilere.

./src/components/MessageItem.tsx

Modul ikke fundet: Kan ikke finde './__generated__/MessageItem_message.graphql'

Årsagen er, at kun komponenter i src-roden kan referere til den rigtige sti (./__generated__), mens komponenter i en mappe faktisk skal referere til stien (../__generated__), men det gør de ikke.

Hvordan kan jeg konfigurere stien?

Svar #1

Rediger .babelrc for at pege på artifactDirectory

// .babelrc
{
  "plugins": [
    [
      "relay",
      {
        "artifactDirectory": "./src/ui/graphql/types"
      }
    ]
  ]
}

Svar #2

Fjern "--artifactDirectory ./src/__generated__" fra relay-compiler-indstillingerne.

Som standard ser det ud til, at Relay-kompileren placerer en "__generated__"-mappe i den mappe, der indeholder enhver kildekode med GraphQL.

Som et resultat fungerer enhver "./__generated__" reference hvor som helst og på ethvert niveau i kildekodehierarkiet nu, som den skal.

Tak til @ThibaultBoursier for tippet.

PS Jeg spekulerer på, om --artifactDirectory-indstillingen bare er beregnet til at ændre navnet på artifaktmappen i stedet for dens placering?

Relaterede artikler