ApolloClient 客户端的类型

Question

我有一个函数，我将客户端作为参数传递并从我的应用程序等中删除令牌：

  const logOut = async (client: ApolloClient<unknown>) => {...};

return (
    <ApolloConsumer>
      {(client: ApolloClient<unknown>) => (
        <SafeAreaView style={styles.safeAreaViewContainer}>
                <View style={styles.buttonContainer}>
                <Button
                  onPress={() => logOut(client)}
                  style={styles.button}
                />
              </View>
             </SafeAreaView>
      )}
    </ApolloConsumer>
  );
};

现在我对 ApolloClient 类型使用unknown并且它有效。 但是我实际上应该在这里使用什么？

Answer 1

如果您查看@apollo/client/react/context/ApolloConsumer.d.ts ，您可以看到客户端的类型是ApolloClient<object> （在较旧的 react-apollo 中，类型是ApolloClient<any> ）

import React from "react";
import { ApolloClient } from "../../core";
export interface ApolloConsumerProps {
  children: (client: ApolloClient<object>) => React.ReactChild | null;
}
export declare const ApolloConsumer: React.FC<ApolloConsumerProps>;
//# sourceMappingURL=ApolloConsumer.d.ts.map

我不会明确指定client的类型。 TypeScript 足够聪明，可以自动推断它。

如果你仍然想写一个更严格的类型，ApolloClient 中的泛型是TCacheShape ，它取决于你与 apollo 一起使用的缓存。

例如，您使用的是InMemoryCache ，泛型类型是NormalizedCacheObject

export interface NormalizedCacheObject {
  [dataId: string]: StoreObject | undefined;
}

export interface StoreObject {
  __typename?: string;
  [storeFieldName: string]: StoreValue;
}