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.

[Urigo]

We now have a GraphQL Code Generator chapter

[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.

[Urigo]

Thank you for your comment @i-void
I've just expanded here and the different ways of representing comments on links and why we chose the current way.
Also, we've added a chapter for code generation so you can check out how Codegen handles this case:
https://github.com/Urigo/hackernews-node-ts/commits/main/

Would you be able to hav a look at the new explanation and implementation and let me know if that covers your question and use case?
Thank you!

[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?

[Urigo]

Thank you @Egahras , you are right!
I've updated the tutorial accordingly
Thank you for your feedback!

[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
        }
  }
}

[Urigo]

You can find here all the commits of all the tutorial, including the optional exercises
I hope it helps!