GraphQL Adoption

[rivernews]

Where to use GraphQL

• GET: Home page company list.
• POST/PATCH/DELETE: As long as we support partial update, GraphQL may not give much benefit over REST at this point.

Things to consider after using GraphQL

• Fetch complete company data upon login --> now we only have partial company data, we still store in redux, but can't be used for company detail page.
  • If we can fetch the rest of company data in detail page, and store in redux, that'll work
    • We can assume content is loading when a company field is lacking in redux, until GraphQL fetch the remaining fields.

[rivernews]

Action items

• [ ] Create GraphQL endpoint for home page GET listing company
  • [ ] Does frontend support embed fields (application, etc)? Yes, it accepts company obj when embed objects, then it do parsing/normalizing, so embedded application will be stored in redux bucket.

Tracking issues along the way

• [x] How to filter by user as default behavior for LIST company query? How can we reuse the django-filter & funds originally for RESTful API?
• [x] Pagination
• [x] What is the way to use pagination?
  • The idea - graphQL: https://graphql.org/learn/pagination/
  • Recommended way - https://github.com/graphql-python/graphene-django/issues/636
  • This way is intended, and not built-in, need to add it manually - https://github.com/graphql-python/graphene/issues/307
• [x] What's next -- in order to use GraphQL in SPA?
• [ ] We'll use Apollo with TypeScript. Will need to create a new service class first, the existing rest-api class may no longer be used.
  • [x] Create a GraphQL API client class, which encapsulate the query logic and just deliver the desired dat
  • [x] (backend) We might want to mimic the response shape of REST API in regards of pagination
    • Unfortunately, seems not possible to turn off "edges, node", so let's transform it in React.
    • Other fields we need to implement: next, previous. But since the way Graphql client work is not based on url, but query payload. So it's probably better to handle GraphQL API call separately.
    • Need to fix a whole bunch of typings
  • [x] Come up a way to hook GraphQL client class, and auth-saga or saga-factory together - the place where API call is made.
  • [x] Experimentally switch auth-saga fetch logic to use graphql client.
  • [x] We need to setup for each company type - applied, interviewing, etc
  • [x] We need to deal with more detail company data - it should be fetched when visintg detail page.
    • [x] Prepare redux suite for READ, the single GET.
    • [x] Make initially missing fields on page be shown as loading skeletons
    • [x] Dispatch action in detail page

[rivernews]

Remaining Bugs

• [x] React material's Ripple causes Cannot read property 'getBoundingClientRect' of null, page crashed
  • Solved by removing react material component with material-ui.
• [x] In chrome graphql endpoint is not recognizing auth token
  • GraphQL cannot reuse rest's JWT. Need to manually add it
• [ ] Some issues in application status - keep loading
• [ ] (Optional) May need some improvements - only load other company data if ever go back to home page

[rivernews]

Achieved our goal, reduced bandwidth and loaded very fast on home page. Working on production site, closing this issue now.