Efficient Feature Implementation Using Type Merging

Transcript

1. Efficient Feature Implementation Using Type Merging Yan
2. Today's keynote is available for public viewing on Speaker Deck. Feel free to share :)
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
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
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
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
7. 2. Introduction of the services SHElikes API SHE WORKS API SHEProf API DB DB DB SHElikes SHE WORKS
8. 2. Introduction of the services SHElikes API SHE WORKS API SHEProf API DB DB DB SHElikes SHE WORKS
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.
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.
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.
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?
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.
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
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
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 }
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 👀 }
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?
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
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
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
22. 3. How Type Merging improve cross service development The concept of Type Merging is best illustrated in the official documentation's diagram.
23. When I implemented the function, I faced some challenges…
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
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.
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!
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 }
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!
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
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?
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!
32. Thank you for your attention, I will find answers and share them on docs later!