Nuxt Algolia InstantSearch: реализовать рендеринг на стороне сервера, когда клиент загружается динамически

Question

TL;DR: есть ли способ получить доступ к переменным, созданным в mixins в Vue?

---

Я новичок в Vue (/ Nuxt) и Algolia с vue-instantsearch. Я хочу добавить Algolia в свое приложение Nuxt 3.

Пока это работает, но только тогда, когда страница отображается на стороне клиента. Это не работает при рендеринге на стороне сервера. К счастью, в Nuxt есть vue-instantsearch руководство по рендерингуна стороне сервера .

В документации он запускает компонент перед компонентом, а затем использует этого клиента в миксине следующим образом:

      // ...

const searchClient = algoliasearch(
  'latency',
  '6be0576ff61c053d5f9a3225e2a90f76'
);

export default {
  mixins: [
    createServerRootMixin({
      searchClient,
      indexName: 'instant_search',
    }),
  ],

// ...

Однако в моем случае я хочу ограничить поиск для пользователей. (Не каждый пользователь должен видеть каждую запись.) Поэтому я генерирую токен для своих пользователей динамически и получаю в своем.

      setup() {
  const sessionSearchTokenQuery = useQuery(gqlSessionSearchToken)
  const sessionSearchToken = useResult(sessionSearchTokenQuery.result)
  const searchClient = ref<SearchClient | null>(null)
  watch(
    sessionSearchToken,
    (token) => {
      if (token?.appID && token?.clientKey) {
        searchClient.value = algoliasearch(token.appID, token.clientKey)
      }
    },
    { immediate: true }
  )
  return { searchClient, token: sessionSearchToken }
},

Так что теперь я не думаю, что могу получить доступ к миксинам, не так ли?

Как я могу это решить? Есть ли способ сначала получить клиента, а затем инициировать миксины и передать клиента миксинам? Может быть, для этого есть двухкомпонентное решение, где один компонент создает searchClient, передает его следующему компоненту, который затем использует его в миксине?

---

Изменить: я использую хакерское решение.

      export default defineComponent({
  components: {
    SessionCardLoad,
  },
  provide() {
    return {
      $_ais_ssrInstantSearchInstance: this.instantsearch,
    }
  },
  setup() {
    const sessionSearchTokenQuery = useQuery(gqlSessionSearchToken)
    const sessionSearchToken = useResult(sessionSearchTokenQuery.result)
    const searchClient = ref<SearchClient | null>(null)
    watch(
      sessionSearchToken,
      (token) => {
        if (token?.appID && token?.clientKey) {
          searchClient.value = algoliasearch(token.appID, token.clientKey)
        }
      },
      { immediate: true }
    )
    const { data } = createServerRootMixin({searchClient, $config.MIML_STAGE + '-miml-sentences'})
    const { instantSearch } = data()
    return { searchClient, token: sessionSearchToken, instantsearch }
  },
  head() {
    return {
      link: [
        {
          rel: 'stylesheet',
          href: 'https://cdn.jsdelivr.net/npm/instantsearch.css@7.4.5/themes/satellite-min.css',
        },
      ],
    }
  },
})

Здесь я использую миксин в настройке, чтобы получить данные, которые обычно возвращает миксин. И я имитируюprovide шаг из кода миксина.

Моя основная проблема здесь - это доступ $config в setup() имущество.