GraphQL: A SurveyMonkey Journey by Andrew Kandalaft, Software Engineer at SurveyMonkey

Transcript

1. GraphQL: A SurveyMonkey Journey By Andrew Kandalaft
2. 2 I’m Andrew Software Engineer @ Work with APIs often! • Developer Platform • Web Platform • Security Engineering
3. 3 Why Reusability!
4. 4 Spoiler: It worked! Old API Egress New API Egress 75% reduction of API payload size ~43% Desktop faster time to interaction
5. 5 How did we get there ?
6. 6 NodeJS Apollo WDS ReactJS Python Pyramid RabbitM Q Tech Stack ... Monorepository Microservices
7. Designing the Client
8. 8 Modular components • Reusable components • Data needs are colocated • Decide on component boundaries • Avoid page-level queries
9. 9 Shared Component Shared Component Page 1 Page 2 Page 3 Overfetching! Data Needs Underfetching! Underfetching!
10. 10 Component Boundaries Error & Loading
11. 11 Network Costs... • By default, every component will make their own network request • Minimal round-trips was one of our selling points of GraphQL • Many components need (at least partially) the same data Simple solution But not perfect...
12. Building the Server
13. 13 Schema Design New Graph, old REST APIs... Adopt incrementally based on needs Design based on the domain, not existing REST APIs Focus on relationships between objects
14. 14 Reusable schema Schema Design
15. 15 Schema Design Domain Knowledge • Schema developers ideally have both: • Strong domain knowledge • GraphQL understanding and experience • Separate schema into domains • Apollo Gateway an option now! • We still want one unified Graph • That is consistent • Doesn’t overlap • Still have core GraphQL team
16. 16 Confidential Resolving Data Modular reducers Client Query Server Resolvers const QUERY = gql`{ survey(id: $surveyId) { id status collectors { id name } } surveyCollectors(surveyId: $surveyId) { id name } }`; const resolvers = { Survey: { collectors: (survey, args, ctx, info) => getSurveyCollectors(ctx, survey.id) status: (survey, args, ctx, info) => getSurveyStatus(survey.id) } Query: { surveyCollectors: (root, args, ctx, info) => getSurveyCollectors(ctx, args.surveyId) } }
17. 17 Confidential Resolving Data Minimize Network Requests (again…) De-Dupe Requests Batch Requests class SurveysAPI extends DataSource { questionLoader = new DataLoader(questionIds => { return this.get( `/survey_questions?ids=${questionIds.join(',')}` ); }); getQuestionsBatch = async questionId => this.questionLoader.load(questionId); } class DataSource { constructor(...) { ... this.dataLoader = new DataLoader(keys => Promise.resolve(keys.map(this.fetchFromKey)) ); } get = async (path, options) => { options.method = 'GET'; return this.dataLoader.load( JSON.stringify({ path, options }) ); } }
18. Observability
19. 19 Distributed Tracing Step 1: Add to APM Desktop Need to track the request through the whole system... Step 2: Fix transactions • Option 1: OperationName (sideBarQuery) • Option 2: Parent.field (Query.survey)
20. 20 Instrument Resolvers Add context to transaction function resolverMW(resolve, parent, args, context, info) { // Start a segment for each resolver in NewRelic return newrelic.startSegment( `GraphQL/${info.parentType}.${info.fieldName}`, // Include the segment as a custom metric true, // The function being tracked, wrap the resolver () => Promise.resolve(resolve(parent, args, context, info)); ); }
21. 21 Errors & Logging Avoid sending PII with Type System! Promise.resolve(resolve(parent, args, context, info)).catch(error => { // Get useful error context const errorData = { fieldName: info.fieldName, parentType: info.parentType, ... arguments: cleanArguments({ args, info }) }; // Log or push where you need it logger.error(error, errorData, 'resolver'); throw error; });
22. 22 GraphQL Insights using Apollo Engine! Metrics Schema Registry Client Registry
23. The Future
24. 24 What’s next? Make our GraphQL API public for our partners Getting the rest of our core application onto GraphQL Support real-time applications with GraphQL
25. We are hiring
26. Thank You