Refactor `getClient` methods in pipeline editor
Follow-up to !62872 (comment 599949199).
When updating the apollo cache, we should prefer using a @client
mutation and a local resolver instead of introducing getClient
methods and directly writing to the cache. This is more in line with our current development pattern and is the recommended best practice of Vue Apollo.
Implementation Plan
In the pipeline editor, there are two more instances of getClient.writeQuery
being used. All of them reside in pipeline_editor_app.vue.
The cache data to update are:
There are also some direct cache writing as well in commit_section.vue
These should all be updated to use a local mutation and client resolver to update the cache.
Sample Code
A sample implementation can be found for currentBranch
in !62872 (merged).
Vue Apollo also has an example on updating the cache with local mutation.
Create a mutation for the data we want to update.
# ~/pipeline_editor/graphql/mutations/update_current_branch.mutation.graphql
mutation updateCurrentBranch($currentBranch: String) {
updateCurrentBranch(currentBranch: $currentBranch) @client
}
Add the @client
resolver in app/assets/javascripts/pipeline_editor/graphql/resolvers.js
import produce from 'immer';
export const resolvers = {
Mutation: {
updateCurrentBranch: (_, { currentBranch = undefined }, { cache }) => {
cache.writeQuery({
query: getCurrentBranchQuery,
data: produce(cache.readQuery({ query: getCurrentBranchQuery }), (draftData) => {
draftData.currentBranch = currentBranch;
}),
});
},
},
};
Replace writeQuery
with the apollo mutation.
updateCurrentBranch(currentBranch) {
this.$apollo.mutate({
mutation: updateCurrentBranchMutation,
variables: { currentBranch },
});
}
- await this.$apollo.getClient().writeQuery({
- query: getCurrentBranch,
- data: { currentBranch: newBranch },
- });
+ this.updateCurrentBranch(newBranch);