Блог

У меня есть одна конкретная проблема, которая меня смущает. Это немного логики, которую я настроил:

 import { useQuery, useResult } from "@vue/apollo-composable";

import * as search from "@graphql/api/query.search.gql";

export const defaultParameters: {
  identifier?: string;
  searchTerm: string;
  itemsToShow: number;
  page: number;
  filters: any;
  facets: string[];
} = {
  searchTerm: "*",
  itemsToShow: 5,
  page: 1,
  filters: [],
  facets: [],
};

export function useSearch(params) {
  const { result, loading, error, fetchMore } = useQuery(search, params);
  const response = useResult(result, null, (data) => data.search);
  return { response, loading, error, fetchMore };
}
 

Несколько недель назад мне сказали, что использование объекта params позволит apollo отправлять запрос всякий раз, когда объект params изменяется.
Что я могу подтвердить, действительно работает.

Итак, в моем поисковом компоненте я сделал это:

 import {
  computed,
  defineComponent,
  ref,
} from "@vue/composition-api";
import { useSearch } from "@logic/search";

export default defineComponent({
  name: "TheSearch",
  setup() {
    const searchTerm = ref(undefined);
    const submitted = ref(false);

    const params = computed(() => {
      const params = {
        search: {
          searchTerm: searchTerm.value ?? "*",
          page: 1,
          itemsToShow: 5,
          includePartialMatches: true,
        },
      };

      submitted.value = false;

      return params;
    });

    const search = () => {
      submitted.value = true;
    };

    const { response, loading, error } = useSearch(params);

    return {
      searchTerm,
      submitted,
      response,
      loading,
      error,
      search,
    };
  },
});
 

как вы можете видеть const { response, loading, error } = useSearch(params); , эта строка вызывается при вызове функции настройки, и каждый раз, когда я нажимаю кнопку «Отправить», параметры изменяются и запрос вызывается повторно. Проблема в том, что я не хочу вызывать функцию при вызове настройки, я бы предпочел «наблюдать» за поиском и вызывать useSearch , когда он меняется, но с этим есть проблемы.

1. I have to use a reactive const and use Object.assign to update the values whenever the searchTerm changes
2. If I put apollo requests in a function or computed variable, I get an error stating:

Apollo client with id default not found. Use provideApolloClient() if you are outside of a component setup.

Что вызывает целый мир проблем, и мне никогда не удавалось заставить это работать. Итак, имея это в виду, есть ли способ сказать apollo, чтобы он все еще возвращался { response, loading, error, fetchMore } и все еще смотрел объект params, но отменял запрос (или, еще лучше, не выполнял его) при выполнении определенного условия? В этом случае, когда params.search.searchTerm пуст.

Любая помощь была бы очень признательна.