can't set notifyOnNetworkStatusChange with typescript

[merongmerongmerong]

export function useQuery<TData = any, TVariables = OperationVariables>(
  query: DocumentNode,
  // QueryHookOptions
  options?: QueryHookOptions<TVariables>
): ApolloQueryResult<TData> & {
  fetchMore<K extends keyof TVariables>(
    fetchMoreOptions: FetchMoreQueryOptions<TVariables, K> &
      FetchMoreOptions<TData, TVariables>
  ): Promise<ApolloQueryResult<TData>>;
};


type QueryHookOptions<TVariables> = Omit<QueryOptions<TVariables>, 'query'> & {
  suspend?: boolean;
};

current workaround

useQuery<A, B>(Query, { notifyOnNetworkStatusChange: true } as any);

what I expected

useQuery<A, B>(Query, { notifyOnNetworkStatusChange: true });

index.d.ts

// now
type QueryHookOptions<TVariables> = Omit<QueryOptions<TVariables>, 'query'> & {
  suspend?: boolean;
};

// should be
type QueryHookOptions<TVariables> = Omit<WatchQueryOptions<TVariables>, 'query'> & {
  suspend?: boolean;
};


export interface QueryOptions<TVariables = OperationVariables> extends QueryBaseOptions<TVariables> {
    query: DocumentNode;
    metadata?: any;
    context?: any;
}
export interface ModifiableWatchQueryOptions<TVariables = OperationVariables> extends QueryBaseOptions<TVariables> {
    pollInterval?: number;
    notifyOnNetworkStatusChange?: boolean;
}
export interface WatchQueryOptions<TVariables = OperationVariables> extends QueryOptions<TVariables>, ModifiableWatchQueryOptions<TVariables> {
}

cause in index.js, useQuery calls watchQuery so restOptions should have WatchQueryOptions interface too

export function useQuery(query,
  {
    variables,
    suspend = true,
    context: apolloContextOptions,
    ...restOptions
  } = {}
) { 
// ...
// ...
  const watchedQuery = client.watchQuery({
      query,
      variables,
      ...restOptions,
    });
// ...
 }

PS

how can i skip query?

<Query {...options} skip={true}>{renderProps}</Query>
// vs
useQuery<A, B>(Query, { skip: true } as any); // not work cause apolloClient dosn't have skip option

[trojanowski]

Hi @merongmerongmerong

I published a version 0.1.6 with the typescript fix.

how can i skip query?

It's currently not implemented. You can conditionally render a component using the useQuery hook. I can add the skip option, but what behavior of the hook should be if it's true? Return an object with data equal to {}?

[merongmerongmerong]

@trojanowski

thank you for version 0.1.6

come to think of it, as you said i can just render conditionally to prevent query request.

in apollo-client.ts query result type is

export declare type ApolloQueryResult<T> = {
    data: T;
    errors?: GraphQLError[];
    loading: boolean;
    networkStatus: NetworkStatus;
    stale: boolean;
};

however, data is not always T, it is {} when it's not available(loading, error)

const { data, loading, errors } = useQuery<T>(QUERY, options)
console.log(data); // {} -> {} -> T

in react-apollo QueryResult type is

<Query>{(queryResult: QueryResult) => { /**/ }}</Query>

export interface QueryResult<TData = any, TVariables = OperationVariables> extends ObservableQueryFields<TData, TVariables> {
    client: ApolloClient<any>;
    data: TData | undefined;
    error?: ApolloError;
    loading: boolean;
    networkStatus: NetworkStatus;
}

so data field can be undefined. it's slightly different from apollo-client