Make TypeScript type definitions from application schema work with Imports from Prisma

[marktani]

@nickluger commented on Fri Feb 23 2018

1. Define your app schema, and use imports from prisma.graphql in it:

# import DateTime from "./generated/prisma.graphql"

type Foo{
    bar: DateTime
}

2. Run

yarn graphql prepare -p app --output src/generated -g binding-ts --bindings --bundle --save

or just yarn graphql prepare if you have a proper definition in your graphqlconfig.yml
Mine looks like this

projects:
  app:
    schemaPath: "src/schema.graphql"
    extensions:
      prepare-binding:
        output: src/generated/app.ts
        generator: binding-ts
      endpoints:
        default: "http://localhost:4000"
  database:
    schemaPath: "src/generated/prisma.graphql"
    extensions:
      prisma: database/prisma.yml
      prepare-binding:
        output: src/generated/prisma.ts
        generator: prisma-ts

Result:

✖ Generating bindings for project app...
Type "DateTime" not found in document.

[schickling]

Hi @nickluger, I've just tried to reproduce this problem locally but it's working for me. Can you provide a repo with a minimal reproduction? Ideally with pinned versions.

[nickluger]

Was busy, but there you go: https://github.com/nickluger/graphql-import-from-prisma

[schickling]

@kbrandwijk from looking into this, the problem seems to be in the prepare-binding CLI part which right now doesn't seem to support graphql-import (see here in src/schema.graphql).

Can you push a fix for this? This should solve @nickluger's problem. :)

[schickling]

@nickluger this should be fixed by installing v2.15.8 of the graphql-cli.

I was also talking to @kbrandwijk via Slack who suggested to use prepare-bundle to optimize the build speed. Can you please elaborate a bit @kbrandwijk?

[kbrandwijk]

@nickluger Even though the latest graphql-cli release will also run prepare-binding on schemas with import statements, prepare-binding is actually optimized to run after prepare-bundle.
You can achieve this by adding prepare-bundle to your .graphqlconfig like this:

app:
    schemaPath: "src/schema.graphql"
    extensions:
      prepare-bundle: src/generated/app.graphql
      prepare-binding:
        output: src/generated/app.ts
        generator: binding-ts
      endpoints:
        default: "http://localhost:4000"

Now you can use the schema with imports already processed (src/generated/app.graphql) directly. An additional benefit is that the bundled schema will actually exist as a physical file, instead of in-memory only, so it's easier to view/debug.

[nickluger]

That solved the issue. Big thanks go to you @kbrandwijk and @schickling .

[marktani]

Would it make sense to make this configuration the default one for prisma init or the boilerplates?

[schickling]

I don't think it's the default use case that people want to get a binding for their actual GraphQL server (at least when getting started outside of a microservice architecture). Do you agree @nickluger?

[nickluger]

Personally, i would use it in every TypeScript project. I cannot imagine a reason not to have types for my models. Come in handy for seeding in tests for example. Also i re-import the types in the resolver files and set them as return types.

 createItem: async (parent, args: CreateItemInput, ctx: Context, info): Promise<Item>
// i see TS warnings now, e.g. when i miss to return an Item somewhere in the resolver

But i cannot speak for default use cases. Might be overkill for smaller projects.