export default () => ({
isLoading: true,
addedLines: null,
removedLines: null,
endpoint: '',
basePath: '',
commit: null,
startVersion: null,
diffFiles: [],
mergeRequestDiffs: [],
mergeRequestDiff: null,
diffViewType: viewTypeFromQueryString || viewTypeFromCookie || defaultViewType,
tree: [],
treeEntries: {},
showTreeList: true,
currentDiffFileId: '',
projectPath: '',
commentForms: [],
highlightedRow: null,
renderTreeList: true,
showWhitespace: true,
fileFinderVisible: false,
dismissEndpoint: '',
showSuggestPopover: true,
});
Dispatch an action
Trigger
REST API call
Success?
Commit 'success' mutation
State changed
Commit
'error' mutation
Yes
No
Send query
Success / error
State changed
Success / error
State changed
Trigger
mutation
Update cache
const el = document.getElementById('js-design-management');
const { issueIid, projectPath } = el.dataset;
apolloProvider.clients.defaultClient.cache.writeData({
data: {
projectPath,
issueIid,
},
});
query projectFullPath {
projectPath
issueIid
}
query projectFullPath @client {
projectPath
issueIid
}
export const getCurrentDesign = state => designId =>
state.designs.find(design => design.id === designId);
query getDesign($id: String!) {
design(id: $id) @client {
...DesignListItem
}
}
Query: {
design(ctx, { id }, { cache, client }) {
return client
.query({
query: projectQuery,
})
.then(({ data }) => {
const edge = data.project.issue.designs.designs.edges.find(
({ node }) => node.filename === id,
);
return edge.node;
})
},
},
export const toggleFileFinder = ({ commit }, visible) => {
commit(types.TOGGLE_FILE_FINDER_VISIBLE, visible);
};
...
[types.TOGGLE_FILE_FINDER_VISIBLE](state, visible) {
state.fileFinderVisible = visible;
},
mutation toggleFileFinder($visible: Boolean!) {
toggleFileFinder($visible: Boolean!) @client
}
Mutation: {
checkItem: (_, { visible }, { cache }) => {
const data = cache.readQuery({ query: fileFinder });
data.fileFinder.visible = visible;
cache.writeQuery({ query: fileFinder, data });
},
Vuex | Apollo |
---|---|
Mapped state | Local query |
Getters | Local query + resolver |
Actions +mutations | Local mutation + resolver |