使用ApolloClient从useContext钩子导入一个简单变量

import React, { useContext } from 'react';
import { ApolloClient, gql, useQuery } from '@apollo/client';

// 创建ApolloClient实例
const client = new ApolloClient({
  // 配置ApolloClient
  // ...
});

// 创建GraphQL查询
const GET_SIMPLE_VARIABLE = gql`
  query GetSimpleVariable {
    simpleVariable
  }
`;

// 创建一个Context
const SimpleVariableContext = React.createContext();

// 创建一个包含ApolloClient的Provider组件
const ApolloProvider = ({ children }) => {
  return (
    <ApolloProvider client={client}>
      <SimpleVariableContext.Provider value={client}>
        {children}
      </SimpleVariableContext.Provider>
    </ApolloProvider>
  );
};

// 在组件中使用useContext钩子获取简单变量
const MyComponent = () => {
  const client = useContext(SimpleVariableContext);
  const { data } = useQuery(GET_SIMPLE_VARIABLE, { client });

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

  return <div>Simple Variable: {data.simpleVariable}</div>;
};

// 在应用程序的根组件中使用ApolloProvider包裹
const App = () => {
  return (
    <ApolloProvider>
      <MyComponent />
    </ApolloProvider>
  );
};

export default App;