如何在TypeScript中使用Apollo客户端的自定义钩子？

npm install @apollo/client graphql

import { ApolloClient, InMemoryCache } from '@apollo/client';

const useApolloClient = () => {
  const client = new ApolloClient({
    uri: 'YOUR_GRAPHQL_ENDPOINT',
    cache: new InMemoryCache(),
  });

  // 在这里可以添加其他自定义配置，例如认证头部等

  return client;
};

export default useApolloClient;

import { useQuery } from '@apollo/client';
import { gql } from 'graphql-tag';
import useApolloClient from './useApolloClient';

const MyComponent = () => {
  const client = useApolloClient();

  const GET_DATA = gql`
    query GetData {
      // 在这里编写你的查询语句
    }
  `;

  const { loading, error, data } = useQuery(GET_DATA, { client });

  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  // 在这里处理返回的数据

  return <div>My Component</div>;
};

export default MyComponent;