Adopt GraphQL on Static Site Editor

Summary

Use GraphQL + ApolloClient instead of REST + Vuex in the Static Site Editor.

Benefits

• Better suited for scenarios where network efficiency is important. For example, the Static Site Editor may implement a live updates feature.
• Better suited for evolving APIs.
• Requires less boilerplate to convert data returned by the server into proper domain objects for the frontend.

Risks

• We should adopt GraphQL as soon as possible because switching from Vuex + Rest to ApolloClient can consume a significant amount of resources as the feature set grows in the application.

Tasks

Frontend

• Setup ApolloClient.
  • Create application local state type definition.
• Loading content’s source on the editor.
  • Create client-side adapter for the files API.
  • Create client-side resolver for title property.
  • Use GraphQL API to load content in the main page.
• Editing content.
  • Create setContent client-side mutation.
  • Create contentChanged client-side state.
• Submitting changes.
  • Create a client-side adapter for the create branch mutation.
  • Create a client-side adapter for the create commit mutation.
  • Create a client-side adapter for the create MR mutation.
  • Create dismiss error mutation.

Backend

• Implement repository files API query.
• Implement create branch mutation #215617 (closed)
• Implement commit to branch mutation #215618 (closed)
• Implement create MR mutation #215619 (closed)