graphql-codegen + typescript-svelte-apollo - Refetch not working?

Question

(Edited) Refetching with the generated query type seems to work different from the refetch function in Apollo Client useQuery. I don't understand how to phrase it - can anyone provide an example?

I'm realizing the problem is probably either my refetch is not properly phrased, or maybe the store is only hitting the cached query. I've been going over my code for days and I can't figure out what it could be. I've tried await blocks too.

The refetch worked with svelte-apollo, but i'm trying to eliminate that dependency. I've also tried Apollo Client's useQuery, but the whole point of graphql-codegen with typescript-svelte-apollo is to use the generated typescript wrapper for the query.

When I assign the generated query to a reactive constant in my Svelte front-end code,

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

the query does not refetch when i update the query variables, as I would expect.

This is how my svelte template is using the query. The filter object changes based on a form user input. I've tried this with an await block too.

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

Since this plugin allows to use the query directly, without Apollo's useQuery, i'm not sure how to phrase a refetch. If i do $observations.refetch(); inside handleFilter(e), i get an error

Property 'refetch' does not exist on type 'Readable<ApolloQueryResult<GetObservationsQuery> & { query: ObservableQuery<GetObservationsQuery, Exact<{ filter?: FilterObservationsInput; }>>; }>'.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: 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;
          }

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