1

（已编辑）使用生成的查询类型重新获取似乎与 Apollo 客户端中的重新获取功能不同useQuery。我不明白如何表达它 - 任何人都可以提供一个例子吗？

我意识到问题可能是我的 refetch 措辞不正确，或者商店只是命中了缓存的查询。几天来我一直在检查我的代码，但我无法弄清楚它可能是什么。我也尝试过等待块。

refetch 与 svelte-apollo 一起工作，但我正试图消除这种依赖。我也尝试过 Apollo Client's useQuery，但是带有 typescript-svelte-apollo 的 graphql-codegen 的全部意义在于使用生成的 typescript 包装器进行查询。

当我将生成的查询分配给我的 Svelte 前端代码中的反应常数时，

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

正如我所料，当我更新查询变量时，查询不会重新获取。

这就是我的苗条模板使用查询的方式。过滤器对象根据表单用户输入进行更改。await我也用块试过这个。

<script lang="ts">
import { getObservations } from '$lib/generated';

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

function handleFilter(event) {
  filter = event.detail;
}
</script>

{#if $observations.loading}
  Loading...
{:else if $observations.error}
  {$observations.error}
{:else if $observations.data}
  {#each $observations.data['observations']['edges'] as edge}
    <Item node={edge['node']} />
  {/each}
{/if}

由于这个插件允许直接使用查询，没有 Apollo's useQuery，我不知道如何措辞重新获取。如果我在$observations.refetch();里面做handleFilter(e)，我会得到一个错误

Property 'refetch' does not exist on type 'Readable<ApolloQueryResult<GetObservationsQuery> & { query: ObservableQuery<GetObservationsQuery, Exact<{ filter?: FilterObservationsInput; }>>; }>'.ts(2339)

我的配置没有什么花哨的。我在这里做错了吗？

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

这是客户端：

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

生成的查询：

export const getObservations = (
            options: Omit<
              WatchQueryOptions<GetObservationsQueryVariables>, 
              "query"
            >
          ): Readable<
            ApolloQueryResult<GetObservationsQuery> & {
              query: ObservableQuery<
                GetObservationsQuery,
                GetObservationsQueryVariables
              >;
            }
          > => {
            const q = client.watchQuery({
              query: GetObservationsDoc,
              ...options,
            });
            var result = readable<
              ApolloQueryResult<GetObservationsQuery> & {
                query: ObservableQuery<
                  GetObservationsQuery,
                  GetObservationsQueryVariables
                >;
              }
            >(
              { data: {} as any, loading: true, error: undefined, networkStatus: 1, query: q },
              (set) => {
                q.subscribe((v: any) => {
                  set({ ...v, query: q });
                });
              }
            );
            return result;
          }

这是构建它的查询文档：

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
        }
      }
    }
  }
}
4

0 回答 0