1 files changed, 18 insertions, 2 deletions
diff --git a/app/assets/javascripts/boards/mount_multiple_boards_switcher.js b/app/assets/javascripts/boards/mount_multiple_boards_switcher.js
index 738c8fb927e..fa58af24ba2 100644
--- a/app/assets/javascripts/boards/mount_multiple_boards_switcher.js
+++ b/app/assets/javascripts/boards/mount_multiple_boards_switcher.js
@@ -1,8 +1,12 @@
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
+import { mapGetters } from 'vuex';
+import BoardsSelector from '~/boards/components/boards_selector.vue';
+import BoardsSelectorDeprecated from '~/boards/components/boards_selector_deprecated.vue';
+import store from '~/boards/stores';
 import createDefaultClient from '~/lib/graphql';
 import { parseBoolean } from '~/lib/utils/common_utils';
-import BoardsSelector from '~/boards/components/boards_selector.vue';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 Vue.use(VueApollo);
 
@@ -16,11 +20,15 @@ export default (params = {}) => {
     el: boardsSwitcherElement,
     components: {
       BoardsSelector,
+      BoardsSelectorDeprecated,
     },
+    mixins: [glFeatureFlagMixin()],
     apolloProvider,
+    store,
     provide: {
       fullPath: params.fullPath,
       rootPath: params.rootPath,
+      recentBoardsEndpoint: params.recentBoardsEndpoint,
     },
     data() {
       const { dataset } = boardsSwitcherElement;
@@ -39,8 +47,16 @@ export default (params = {}) => {
 
       return { boardsSelectorProps };
     },
+    computed: {
+      ...mapGetters(['shouldUseGraphQL']),
+    },
     render(createElement) {
-      return createElement(BoardsSelector, {
+      if (this.shouldUseGraphQL) {
+        return createElement(BoardsSelector, {
+          props: this.boardsSelectorProps,
+        });
+      }
+      return createElement(BoardsSelectorDeprecated, {
         props: this.boardsSelectorProps,
       });
     },