graphql/yoga-server/tutorial/basic/08-graph-relations

[giscus[bot]]

graphql/yoga-server/tutorial/basic/08-graph-relations

Fully-featured, simple to set up, performant and extendable GraphQL NodeJS (JavaScript/TypeScript) server

https://www.graphql-yoga.com/tutorial/basic/08-graph-relations

[n1ru4l]

@PaPa31 Thank you for reporting this, I already created #1171 for fixing these typos. The changes will be live soon!

[minemax-ua]

This way is almost useless without a (typescript) types generator, and you didn't show how to use one.

[n1ru4l]

We avoided using an additional tool such as GraphQL Code Generator on purpose as we did not want to overwhelm newcomers. You can find a tutorial for setting up GraphQL Code generator with typed resolvers here. In the future we might consider adding this as part of an advanced tutorial.

[samneely]

The Updating Prisma Client section mentions migrating the database with this example.

npx prisma migrate dev --name "add-user-model"

I assume that's supposed to be

npx prisma migrate dev --name "add-comment-model"

since this page is describing how to add a Comment instead.

[n1ru4l]

Thank you for pointing this out, we just updated the tutorial to reflect these changes! #3252

[i-void]

I tried to use this setup with typescript type generators but there is a big mistake here in flow. I'll try to explain;
if you use this type

type Link {
  id: ID!
  description: String!
  url: String!
  comments: [Comment!]!
}

comments MUST be there in your return type of the feed query resolver. But comments will be populated by comments resolver after run of feed. You can solve this by adding some empty array of comments to feeds (links) and wait comments resolver to populate it after. This is not acceptable as this problem exists for not only one to many relations. Think that there would be a field name bestComment in Link and best_comment_id is nonNull in DB. What should be the type of it? And how can I send it in feed resolver as its return type is Comment! in Link object. For JS its not a problem because there are no types. But in TS there is no way to represent this structure as a graph tree.

If you know any solution. Don't hesitate to share pls. I stuck very hard.

[Egahras]

model Comment {
  id        Int      @id @default(autoincrement())
  body      String
  link      Link?    @relation(fields: [linkId], references: [id])
  linkId    Int?
}

Why Link? and Int?
A Comment needs to be matched to a Link, correct?

[Tsimopak]

Can someone share the solution for the optional exercise? I don't know how to do that

[theRealAcecorban]

For Comment.link, add the link: Link property in the typeDefinition for the Comment type,

type Comment {
        id: ID!
        body: String!
        link: Link
    }

then add the following to the Comment resolver:

link(parent: Comment, args: {}, context: GraphQLContext){
            return context.prisma.link.findUnique({
                where: {
                    id: parent.linkId
                }
            })
        }

Your query will look like this:

query comment {
  comment(id: 1) {
    id
    body
    link {
        id
        description
        url
    }
  }
}

For Query.link update your Query type definition to include link (similar to how we did comment):

type Query {
        info: String!
        feed: [Link!]!
        comment(id:ID!): Comment
        link(id:ID!): Link
    }

then add the Query.link resolver (similar to how we added the Query.comment resolver earlier):

const resolvers = {
    Query: {
        ...
        link: async (parent: unknown, args: { id: string }, context: GraphQLContext) => {
            return context.prisma.link.findUnique({
                where: { id: parseInt(args.id) }
            })
        },
        ...
    },
    ...

Which you can query similarly to how we did comment:

query link {
  link(id: 1) {
    id
    description
    url
    comments {
            id
            body
        }
  }
}