README.md wrong in the Fullstack Example with Next.js (GraphQL API)

Hi there! 👋🏽

I have been following the README.md at the Fullstack Example with Next.js (GraphQL API) example and I am having certain issues when adding the Profile

The first one is when, after adding it to the schema.prisma, I run the npx prisma migrate dev command. It gives me this error

Error: This feature is currently in Preview. There may be bugs and it's not recommended to use it in production environments.
Please provide the --preview-feature flag to use this command.

Then I run it with that flag and get this one

Prisma schema loaded from prisma/schema.prisma
Datasource "db": SQLite database "dev.db" at "file:./dev.db"

Error: P1012

error: Error validating: The argument fields must refer only to scalar fields. But it is referencing the following relation fields: user
  -->  schema.prisma:22
   | 
21 |   userId Int     @unique
22 |   user   User    @relation(fields: [user], references: [id])
23 | }
   | 
error: Error parsing attribute "@relation": The type of the field `user` in the model `Profile` is not matching the type of the referenced field `id` in model `User`.
  -->  schema.prisma:22
   | 
21 |   userId Int     @unique
22 |   user   User    @relation(fields: [user], references: [id])
23 | }
   | 

I updated the Profile model fields to user User @relation(fields: [userId], references: [id]) and it worked fine.

I submitted a Pull Request to update the README.md with this fix, please have a look at it. I hope it helps 😊 . Here it is -> https://github.com/prisma/prisma-examples/pull/2416

There is also another issue when adding the Profile objectType. The docs seem to beo outdated because the code from the index.ts file is different from them is outdated.

The issue is related with the Profile model

TS2339: Property 'model' does not exist on type 'ObjectDefinitionBlock"Profile">'.

And in the console it gives me this error

> hello-next@1.0.0 dev /Users/ramonmorcillo/Documents/developer/graphql-nextjs
> next

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully
event - build page: /api
wait  - compiling...
event - compiled successfully
TypeError: Cannot read property 'profile' of undefined
    at Object.definition (webpack-internal:///./pages/api/index.ts:35:13)
    at SchemaBuilder.walkOutputType (/Users/ramonmorcillo/Documents/developer/graphql-nextjs/node_modules/nexus/dist/builder.js:982:13)
    at SchemaBuilder.walkTypes (/Users/ramonmorcillo/Documents/developer/graphql-nextjs/node_modules/nexus/dist/builder.js:269:26)
    at SchemaBuilder.getFinalTypeMap (/Users/ramonmorcillo/Documents/developer/graphql-nextjs/node_modules/nexus/dist/builder.js:420:14)
    at makeSchemaInternal (/Users/ramonmorcillo/Documents/developer/graphql-nextjs/node_modules/nexus/dist/builder.js:1088:94)
    at makeSchema (/Users/ramonmorcillo/Documents/developer/graphql-nextjs/node_modules/nexus/dist/builder.js:1166:51)
    at eval (webpack-internal:///./pages/api/index.ts:215:72)
    at Module../pages/api/index.ts (/Users/ramonmorcillo/Documents/developer/graphql-nextjs/.next/server/pages/api.js:116:1)
    at __webpack_require__ (/Users/ramonmorcillo/Documents/developer/graphql-nextjs/.next/server/pages/api.js:23:31)
    at /Users/ramonmorcillo/Documents/developer/graphql-nextjs/.next/server/pages/api.js:91:18
    at Object.<anonymous> (/Users/ramonmorcillo/Documents/developer/graphql-nextjs/.next/server/pages/api.js:94:10)
    at Module._compile (internal/modules/cjs/loader.js:1158:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
    at Module.load (internal/modules/cjs/loader.js:1002:32)
    at Function.Module._load (internal/modules/cjs/loader.js:901:14)
    at Module.require (internal/modules/cjs/loader.js:1044:19)

I am blocked by this and to continue need to know how should I add the Profile objectType properly to the index.ts file.

If someone could help me out it would be awesome, I can update the README.md later with the update to help others too 😊

[nikolasburk]

Thanks so much for the activity in this repo everyone, the instructions in the README should now be functional again 👍 please open a new issue if you run into any problems in the future 🙂

[nikolasburk]

Hey @reymon359 👋 thank you so much for opening this issue and all the info you provided, that’s incredibly helpful! Also, apologies for the frustration and that things didn’t work at first try for you!

I’ve just updated the READMEs to fix the user reference in the Prisma schema and added the --preview-feature flag for the Migrate command: https://github.com/prisma/prisma-examples/pull/2420

Regarding the last issue with t.model(), this is indeed an issue that we need to resolve. The t.model() function comes from the nexus-plugin-prisma which is actually not used in this example. Here’s the proper code to add the Profile type to your GraphQL schema and add the relation to the User type:

const User = objectType({
  name: 'User',
  definition(t) {
    t.int('id')
    t.string('name')
    t.string('email')
    t.list.field('posts', {
      type: 'Post',
      resolve: (parent) =>
        prisma.user
          .findUnique({
            where: { id: Number(parent.id) },
          })
          .posts(),
    })
    t.field('profile', {
      type: 'Profile',
      resolve: (parent) =>
        prisma.user
          .findUnique({
            where: { id: Number(parent.id) },
          })
          .profile(),
    })
  },
})


const Profile = objectType({
  name: 'Profile',
  definition(t) {
    t.int('id')
    t.nullable.string('bio')
    t.nullable.field('user', {
      type: 'User',
      resolve: (parent) =>
        prisma.profile
          .findUnique({
            where: { id: Number(parent.id) },
          })
          .user(),
    })
  },
})

Also, don’t forget to include the Profile type in the makeSchema function:

export const schema = makeSchema({
  types: [Query, Mutation, Post, User, Profile, GQLDate],
  outputs: {
    typegen: path.join(process.cwd(), 'pages/api/nexus-typegen.ts'),
    schema: path.join(process.cwd(), 'pages/api/schema.graphql'),
  },
})

I hope this helps! We’ll work on updating the README with the last part very soon as well 🙌