Блог

(Отредактировано) Повторная выборка с помощью сгенерированного типа запроса, по-видимому, работает иначе, чем функция повторной выборки в клиенте Apollo useQuery . Я не понимаю, как это сформулировать — может ли кто-нибудь привести пример?

Я понимаю, что проблема, вероятно, либо в том, что мой рефетч неправильно сформулирован, либо, возможно, магазин только выполняет кэшированный запрос. Я уже несколько дней просматриваю свой код и не могу понять, что это может быть. Я тоже пробовал ждать блоков.

Рефетч работал со стройным аполлоном, но я пытаюсь устранить эту зависимость. Я также пробовал клиент Apollo useQuery , но весь смысл graphql-codegen с typescript-svelte-apollo заключается в использовании сгенерированной оболочки typescript для запроса.

Когда я назначаю сгенерированный запрос реактивной константе в моем изящном интерфейсном коде,

 $: observations = getObservations({ variables: { filter } });  

запрос не повторяется при обновлении переменных запроса, как я ожидал бы.

Вот как мой стройный шаблон использует запрос. Объект фильтра изменяется в зависимости от ввода пользователем формы. Я тоже пробовал это с await блоком.

 lt;script lang="ts"gt; import { getObservations } from '$lib/generated';  $: observations = getObservations({ variables: { filter } });  function handleFilter(event) {  filter = event.detail; } lt;/scriptgt;  {#if $observations.loading}  Loading... {:else if $observations.error}  {$observations.error} {:else if $observations.data}  {#each $observations.data['observations']['edges'] as edge}  lt;Item node={edge['node']} /gt;  {/each} {/if}  

Поскольку этот плагин позволяет использовать запрос напрямую, без Apollo useQuery , я не уверен, как сформулировать повторную выборку. Если я это сделаю $observations.refetch(); внутри handleFilter(e) , я получу сообщение об ошибке

 Property 'refetch' does not exist on type 'Readablelt;ApolloQueryResultlt;GetObservationsQuerygt; amp; { query: ObservableQuerylt;GetObservationsQuery, Exactlt;{ filter?: FilterObservationsInput; }gt;gt;; }gt;'.ts(2339)  

There’s nothing fancy in my config. Am I doing something wrong here?

 schema: src/graphql/schema.graphql documents:   - src/graphql/queries.graphql  - src/graphql/mutations.graphql generates:  src/lib/generated.ts:  plugins:  - typescript  - typescript-operations  - graphql-codegen-svelte-apollo config:   clientPath: src/lib/shared/client  # asyncQuery: true  scalars:  ISO8601Date: Date  ISO8601DateTime: Date  

Here’s the client:

 export default new ApolloClient({  link: authLink.concat(httpLink),  cache: new InMemoryCache({  typePolicies: {  Query: {  fields: {  observations: relayStylePagination(),  },  },  },  }) });  

The generated query:

 export const getObservations = (  options: Omitlt;  WatchQueryOptionslt;GetObservationsQueryVariablesgt;,   "query"  gt;  ): Readablelt;  ApolloQueryResultlt;GetObservationsQuerygt; amp; {  query: ObservableQuerylt;  GetObservationsQuery,  GetObservationsQueryVariables  gt;;  }  gt; =gt; {  const q = client.watchQuery({  query: GetObservationsDoc,  ...options,  });  var result = readablelt;  ApolloQueryResultlt;GetObservationsQuerygt; amp; {  query: ObservableQuerylt;  GetObservationsQuery,  GetObservationsQueryVariables  gt;;  }  gt;(  { data: {} as any, loading: true, error: undefined, networkStatus: 1, query: q },  (set) =gt; {  q.subscribe((v: any) =gt; {  set({ ...v, query: q });  });  }  );  return result;  }  

Here’s the query document that it’s built from:

 query getObservations($filter: FilterObservationsInput) {  observations(filter: $filter) {  pageInfo {  startCursor  endCursor  hasNextPage  hasPreviousPage  }  edges {  cursor  node {  id  createdAt  updatedAt  when  where  imgSrcThumb  imgSrcSm  imgSrcMed  thumbImage {  width  height  }  name {  formatName  author  }  user {  name  login  }  rssLog {  detail  }  }  }  } }