import { DocumentNode } from '@apollo/client/core';
import { ErrorLink } from '@apollo/client/link/error';
import { execute } from '@apollo/client/core';
import type { ApolloClient as FlexDataClient } from '@apollo/client/core';
import { CombinedGraphQLErrors as FlexDataClientError } from '@apollo/client/core';
import { ApolloLink as FlexDataClientLink } from '@apollo/client/core';
import { gql } from 'graphql-tag';
import { LocalState } from '@apollo/client/local-state';
import type { NormalizedCacheObject } from '@apollo/client/core';
import { Observable } from '@apollo/client/core';
import { TypedDocumentNode } from '@apollo/client/core';
import { TypePolicies } from '@apollo/client/core';
import { useLazyQuery } from '@apollo/client/react';
import { useMutation } from '@apollo/client/react';
import { useQuery } from '@apollo/client/react';
import { useSubscription } from '@apollo/client/react';

/**
 * A React Provider for the DataClient
 * @param props - DataClient instance and children
 *
 * @returns
 *
 * @example
 *
 * ```tsx
 * import { DataClientProvider, createDataClient } from "@twilio/flex-sdk/data-client";
 *
 * const dataClient = await createDataClient("token");
 *
 * <DataClientProvider dataClient={dataClient}>
 *     <span>test content</span>
 * </DataClientProvider>
 * ```
 *
 * @public
 */
export declare const DataClientProvider: {
    ({ children, dataClient }: DataClientProviderProps): JSX.Element;
    displayName: string;
};

/**
 * @public
 */
export declare interface DataClientProviderProps {
    children: JSX.Element;
    dataClient: FlexDataClient;
}

export { DocumentNode }

export { ErrorLink }

export { execute }

export { FlexDataClient }

export { FlexDataClientError }

export { FlexDataClientLink }

export { gql }

export { LocalState }

export { NormalizedCacheObject }

export { Observable }

export { TypedDocumentNode }

export { TypePolicies }

/**
 * A hook for imperatively executing queries in an Apollo application, e.g. in response to user interaction.
 * Refer to the [Queries - Manual execution with useLazyQuery](https://www.apollographql.com/docs/react/data/queries#manual-execution-with-uselazyquery) section for a more in-depth overview of `useLazyQuery`.
 * @param query - A GraphQL query document parsed into an AST by `gql`.
 * @param options - Default options to control how the query is executed.
 *
 * @returns A tuple in the form of `[execute, result]`
 *
 * @example
 * ```jsx
 * import { gql, useDataClientLazyQuery } from "@twilio/flex-sdk/data-client";
 *
 * const GET_GREETING = gql`
 *   query GetGreeting($language: String!) {
 *     greeting(language: $language) {
 *       message
 *     }
 *   }
 * `;
 *
 * function Hello() {
 *   const [loadGreeting, { called, loading, data }] = useDataClientLazyQuery(
 *     GET_GREETING,
 *     { variables: { language: "english" } }
 *   );
 *   if (called && loading) return <p>Loading ...</p>
 *   if (!called) {
 *     return <button onClick={() => loadGreeting()}>Load greeting</button>
 *   }
 *   return <h1>Hello {data.greeting.message}!</h1>;
 * }
 * ```
 *
 * @public
 */
export declare const useDataClientLazyQuery: typeof useLazyQuery;

/**
 *
 * A hook for executing mutations in an Apollo application.
 * Refer to the [Mutations](https://www.apollographql.com/docs/react/data/mutations/) section for a more in-depth overview of `useMutation`.
 * @param mutation - A GraphQL mutation document parsed into an AST by `gql`.
 * @param options - Options to control how the mutation is executed.
 *
 * @returns A tuple in the form of `[mutate, result]`
 *
 * @example
 * ```jsx
 * import { gql, useDataClientMutation } from '\@twilio/flex-sdk/data-client';
 *
 * const ADD_TODO = gql`
 *   mutation AddTodo($type: String!) {
 *     addTodo(type: $type) {
 *       id
 *       type
 *     }
 *   }
 * `;
 *
 * function AddTodo() {
 *   let input;
 *   const [addTodo, { data }] = useDataClientMutation(ADD_TODO);
 *
 *   return (
 *     <div>
 *       <form
 *         onSubmit={(e) => {
 *           e.preventDefault();
 *           addTodo({ variables: { type: input.value } });
 *           input.value = '';
 *         }}
 *       >
 *         <input
 *           ref={(node) => {
 *             input = node;
 *           }}
 *         />
 *         <button type="submit">Add Task</button>
 *       </form>
 *     </div>
 *   );
 * }
 * ```
 *
 * @public
 */
export declare const useDataClientMutation: typeof useMutation;

/**
 * A hook for executing queries in an Apollo application.
 *
 * To run a query within a React component, call `useQuery` and pass it a GraphQL query document.
 *
 * When your component renders, `useQuery` returns an object from Apollo Client that contains `loading`, `error`, and `data` properties you can use to render your UI.
 * @param query - A GraphQL query document parsed into an AST by `gql`.
 * @param options - Options to control how the query is executed.
 *
 * @returns Query result object
 *
 * @example
 * ```jsx
 * import { gql, useDataClientQuery } from '@twilio/flex-sdk/data-client';
 *
 * const GET_GREETING = gql`
 *   query GetGreeting($language: String!) {
 *     greeting(language: $language) {
 *       message
 *     }
 *   }
 * `;
 *
 * function Hello() {
 *   const { loading, error, data } = useDataClientQuery(GET_GREETING, {
 *     variables: { language: 'english' },
 *   });
 *   if (loading) return <p>Loading ...</p>;
 *   return <h1>Hello {data.greeting.message}!</h1>;
 * }
 * ```
 *
 * @public
 */
export declare const useDataClientQuery: typeof useQuery;

/**
 * Refer to the [Subscriptions](https://www.apollographql.com/docs/react/data/subscriptions/) section for a more in-depth overview of `useSubscription`.
 * @remarks
 * #### Consider using `onData` instead of `useEffect`
 *
 * If you want to react to incoming data, please use the `onData` option instead of `useEffect`.
 * State updates you make inside a `useEffect` hook might cause additional rerenders, and `useEffect` is mostly meant for side effects of rendering, not as an event handler.
 * State updates made in an event handler like `onData` might - depending on the React version - be batched and cause only a single rerender.
 *
 * Consider the following component:
 *
 * ```jsx
 * export function Subscriptions() {
 *   const { data, error, loading } = useDataClientSubscription(query);
 *   const [accumulatedData, setAccumulatedData] = useState([]);
 *
 *   useEffect(() => {
 *     setAccumulatedData((prev) => [...prev, data]);
 *   }, [data]);
 *
 *   return (
 *     <>
 *       {loading && <p>Loading...</p>}
 *       {JSON.stringify(accumulatedData, undefined, 2)}
 *     </>
 *   );
 * }
 * ```
 *
 * Instead of using `useEffect` here, we can re-write this component to use the `onData` callback function accepted in `useSubscription`'s `options` object:
 *
 * ```jsx
 * export function Subscriptions() {
 *   const [accumulatedData, setAccumulatedData] = useState([]);
 *   const { data, error, loading } = useDataClientSubscription(
 *     query,
 *     {
 *       onData({ data }) {
 *         setAccumulatedData((prev) => [...prev, data])
 *       }
 *     }
 *   );
 *
 *   return (
 *     <>
 *       {loading && <p>Loading...</p>}
 *       {JSON.stringify(accumulatedData, undefined, 2)}
 *     </>
 *   );
 * }
 * ```
 *
 * > ⚠️ **Note:** The `useSubscription` option `onData` is available in Apollo Client >= 3.7. In previous versions, the equivalent option is named `onSubscriptionData`.
 *
 * Now, the first message will be added to the `accumulatedData` array since `onData` is called _before_ the component re-renders. React 18 automatic batching is still in effect and results in a single re-render, but with `onData` we can guarantee each message received after the component mounts is added to `accumulatedData`.
 *
 * @param subscription - A GraphQL subscription document parsed into an AST by `gql`.
 * @param options - Options to control how the subscription is executed.
 *
 * @returns Query result object
 *
 * @example
 * ```jsx
 * const COMMENTS_SUBSCRIPTION = gql`
 *   subscription OnCommentAdded($repoFullName: String!) {
 *     commentAdded(repoFullName: $repoFullName) {
 *       id
 *       content
 *     }
 *   }
 * `;
 *
 * function DontReadTheComments({ repoFullName }) {
 *   const {
 *     data: { commentAdded },
 *     loading,
 *   } = useDataClientSubscription(COMMENTS_SUBSCRIPTION, { variables: { repoFullName } });
 *   return <h4>New comment: {!loading && commentAdded.content}</h4>;
 * }
 * ```
 *
 * @public
 */
export declare const useDataClientSubscription: typeof useSubscription;

export { }