$30 off During Our Annual Pro Sale. View Details »

Efficient Feature Implementation Using Type Merging

Efficient Feature Implementation Using Type Merging

Yan | 近藤智哉

September 13, 2023
Tweet

More Decks by Yan | 近藤智哉

Other Decks in Technology

Transcript

  1. Efficient Feature
    Implementation Using Type
    Merging
    Yan

    View Slide

  2. Today's keynote is available for public viewing on Speaker Deck.
    Feel free to share :)

    View Slide

  3. TOC
    1. Self introduction
    2. Introduction of the services
    3. Use case of the GraphQL Stitching and the Type Merging
    3. How Type Merging improve cross service development
    4. 3 challenges I faced

    View Slide

  4. 1. Self introduction
    I’m Yan (@mtyk_5) 󰢧
    Kondo Motoya
    RevComm
    We are using GraphQL with Python.
    (Personally, I’ve not joined that team)
    Kalonade (quited)
    Using Hasura as a backend
    SHE
    Using GraphQL Yoga

    View Slide

  5. 1. Self introduction
    I’m Yan 󰢧
    Kondo Motoya
    RevComm
    We are using GraphQL with Python.
    (Personally, I’ve not joined that team)
    Kalonade (quited)
    Using Hasura as a backend
    SHE
    Using GraphQL Yoga

    View Slide

  6. 2. Introduction of the services
    At SHE, we provide services for upskilling.
    We offer two main types of services:
    For learners. (like Udemy) For companies looking to hire
    learners.
    SHElikes SHE WORKS

    View Slide

  7. 2. Introduction of the services
    SHElikes
    API
    SHE WORKS
    API
    SHEProf
    API
    DB
    DB
    DB
    SHElikes SHE WORKS

    View Slide

  8. 2. Introduction of the services
    SHElikes
    API
    SHE WORKS
    API
    SHEProf
    API
    DB
    DB
    DB
    SHElikes SHE WORKS

    View Slide

  9. 3. Use case of the GraphQL Stitching and the Type Merging
    SHEProf
    API
    DB
    SHElikes
    https://www.freepik.com/free-vector/attractive-online-curriculum-template_23
    33343.htm#query=profile%20ui&position=13&from_view=search&track=ais
    Freepik
    It's a part of our learning service,
    a service similar to LinkedIn where users
    can view each other's profiles.
    Users can enter their key attributes and
    create a simple resume,
    highlighting their strengths.

    View Slide

  10. 3. Use case of the GraphQL Stitching and the Type Merging
    SHE WORKS
    API
    DB
    SHE
    WORKS
    https://www.freepik.com/free-photo/application-form-employme
    nt-document-concept_18138154.htm#query=applicant%20for
    m&position=23&from_view=search&track=ais on Freepik
    It's a service that connects companies with
    learners.
    For instance, companies can initiate
    competitions for specific jobs,
    and learners can apply based on their own
    achievements and work.

    View Slide

  11. 3. Use case of the GraphQL Stitching and the Type Merging
    SHE WORKS
    API
    DB
    SHE
    WORKS
    https://www.freepik.com/free-photo/application-form-employme
    nt-document-concept_18138154.htm#query=applicant%20for
    m&position=23&from_view=search&track=ais on Freepik
    what is your profile URL?
    Learners need to include the URL to their
    own profile when applying to companies.
    Unfortunately, sometimes users make
    mistakes in this process, which can
    result in missed job opportunities.

    View Slide

  12. 3. Use case of the GraphQL Stitching and the Type Merging
    SHE WORKS
    API
    DB
    SHE
    WORKS
    https://www.freepik.com/free-photo/application-form-employme
    nt-document-concept_18138154.htm#query=applicant%20for
    m&position=23&from_view=search&track=ais on Freepik
    what is your profile URL?
    Learners need to include the URL to their
    own profile when applying to companies.
    Unfortunately, sometimes users make
    mistakes in this process, which can
    result in missed job opportunities.
    How can we address this issue?

    View Slide

  13. 3. Use case of the GraphQL Stitching and the Type Merging
    SHE WORKS
    API
    DB
    SHE
    WORKS
    SHEProf
    API
    DB
    Should we use two different GraphQL API?
    Maybe, No.

    View Slide

  14. 3. Use case of the GraphQL Stitching and the Type Merging
    SHE WORKS
    API
    DB
    SHE
    WORKS
    SHEProf
    API
    DB
    We should use GraphQL Stitching to
    connect both SHEProf API and SHE Works
    API.
    We call this server as “GraphQL Gateway”.
    GraphQL
    Gateway

    View Slide

  15. 3. Use case of the GraphQL Stitching and the Type Merging
    The implementation of the Gateway was done using the following steps:
    1. Implemented a query that outputs the schema as a string, called '_sdl Query,' for each
    Sub GraphQL API.
    2. Used this information to retrieve the schema for each Sub GraphQL API within the
    GraphQL Gateway.
    3. Finally, used the stitchSchemas function to generate the schema for the GraphQL
    Gateway.
    See the sample implementation ->
    https://the-guild.dev/graphql/stitching/docs/approaches/stitching-directives

    View Slide

  16. 3. How Type Merging improve cross service development
    Using GraphQL Stitching, we were able to connect two Sub GraphQL APIs.
    The next step is to retrieve the desired data without creating a new query by utilizing
    Type Merging.
    SHE WORKS
    API
    SHEProf
    API
    Type User {
    id
    profile: Profile
    }
    type Profile {
    userId
    profileUrl
    }
    Type User {
    id
    }
    Query {
    getUser(id: String): User
    }

    View Slide

  17. 3. How Type Merging improve cross service development
    SHE WORKS
    API
    SHEProf
    API
    Type User {
    id
    profile: Profile
    }
    type Profile {
    userId
    profileUrl
    }
    Type User {
    id
    }
    Query {
    getUser(id: String):
    User
    }
    Gateway
    API
    Type User {
    id
    profile: Profile 👀
    }
    type Profile {
    userId
    profileUrl
    }
    Query {
    getUser(id: String!): User 👀
    }

    View Slide

  18. 3. How Type Merging improve cross service development
    SHE WORKS
    API
    SHEProf
    API
    Type User {
    id
    profile: Profile
    }
    type Profile {
    userId
    profileUrl
    }
    Type User {
    id
    }
    Query {
    getUser(id: String):
    User
    }
    Gateway
    API
    Type User {
    id
    profile: Profile 👀
    }
    type Profile {
    userId
    profileUrl
    }
    Query {
    getUser(id: String!): User 👀
    }
    How can we merge types?

    View Slide

  19. 3. How Type Merging improve cross service development
    You can merge types with Type Merging.
    https://the-guild.dev/graphql/stitching/docs/approaches/type-merging
    1. Define merge configuration in the GraphQL Gateway Schmea
    2. Define merge configuration in the each Sub GraphQL Schema with directive

    View Slide

  20. 3. How Type Merging improve cross service development
    You can merge types with Type Merging.
    https://the-guild.dev/graphql/stitching/docs/approaches/type-merging
    1. Define merge configuration in the GraphQL Gateway Schmea
    2. Define merge configuration in the each Sub GraphQL Schema with directive

    View Slide

  21. 3. How Type Merging improve cross service development
    You can merge types with Type Merging.
    https://the-guild.dev/graphql/stitching/docs/approaches/type-merging
    1. Define merge configuration in the GraphQL Gateway Schmea
    2. Define merge configuration in the each Sub GraphQL Schema with directive

    View Slide

  22. 3. How Type Merging improve cross service development
    The concept of Type Merging is best illustrated in the official documentation's diagram.

    View Slide

  23. When I implemented the function, I faced some challenges…

    View Slide

  24. 4. 3 challenges I faced
    Where should we defined the “Typem merging configuration”
    If we use “directive” on the each sub GraphQL API Schema.
    SHElikes
    Team
    SHE WORKS
    Team
    Schema
    Schema
    Gateway

    View Slide

  25. 4. 3 challenges I faced
    Where should we defined the “Typem merging configuration”
    If we use “directive” on the each sub GraphQL API Schema.
    👍 We don’t need to touch GraphQL Gateway. So, the each team can implement their
    functions separately.
    👍 Defining with “directives” seems to be simple.
    😓 Since you don't actually see the integrated schema in the Gateway, as the system
    scales up, there may be cases where it doesn't work correctly, and it's difficult to
    understand why.

    View Slide

  26. 4. 3 challenges I faced
    Where should we defined the “Typem merging configuration”
    If we use “directive” on the each sub GraphQL API Schema.
    👍 We don’t need to touch GraphQL Gateway. So, the each team can implement their
    functions separately.
    👍 Defining with “directives” seems to be simple.
    😓 Since you don't actually see the integrated schema in the Gateway, as the system
    scales up, there may be cases where it doesn't work correctly, and it's difficult to
    understand why.
    󰢧 If you have a opinion or good idea let’s discuss later!

    View Slide

  27. 4. 3 challenges I faced
    How can we define “kindly” Schema to other teams.
    We should prepare like the following Schema for the GraphQL Gateway even though we
    don’t use it for the Sub API GraphQL.
    Query {
    getUser(id: String!): User
    }

    View Slide

  28. 4. 3 challenges I faced
    How can we define “kindly” Schema to other teams.
    We should prepare like the following Schema for the GraphQL Gateway even though we
    don’t use it for the Sub API GraphQL.
    Query {
    getUser(id: String!): User
    }
    󰢧 Is there any “eslint” staff to restrict the developers to follow the regurgitation or
    defect standard? If you have any thoughts, please let me know!

    View Slide

  29. 4. 3 challenges I faced
    How can I debug the GraphQL Stitching?
    I encountered cases where I couldn't pinpoint where the issue was occurring during the
    actual implementation.
    Sub GraphQL
    Schema
    GraphQL Gateway
    Resolvers

    View Slide

  30. 4. 3 challenges I faced
    How can I debug the GraphQL Stitching?
    I encountered cases where I couldn't pinpoint where the issue was occurring during the
    actual implementation.
    Sub GraphQL
    Schema
    GraphQL Gateway
    Resolvers
    🙃
    The Gateway send
    collect queries?

    View Slide

  31. 4. 3 challenges I faced
    How can I debug the GraphQL Stitching?
    Personally, I checked the executor function to find what query is executed.
    But I believe there are more
    efficient way to do debug.
    I will deeply look into the
    issues, but if you have a time.
    Let’s discuss!

    View Slide

  32. Thank you for your attention,
    I will find answers and share them on docs later!

    View Slide