{
    "componentChunkName": "component---src-templates-api-template-tsx",
    "path": "/programmable-components/FlexDataClient/",
    "result": {"data":{"entityQuery":{"nodes":[{"name":"FlexDataClient","docName":"Flex Data Client","properties":[],"description":"<p>FlexDataClient contains a set utility functions to fetch Flex data using GraphQL syntax.</p>","classdesc":null,"examples":null}]},"membersQuery":{"nodes":[{"name":"useFlexQuery","docName":null,"longname":"FlexDataClient.useFlexQuery","description":"<p>useFlexQuery is a React hook that executes GraphQL queries automatically within a React component.</p>","defaultvalue":null,"type":null,"properties":null,"params":[{"name":"query","optional":null,"description":"<p>The GraphQL query document to be executed.</p>","type":{"names":["object"]}},{"name":"options","optional":true,"description":"<p>Additional options for configuring the query execution.</p>","type":{"names":["object"]}},{"name":"options.variables","optional":true,"description":"<p>An object containing variables to be used in the query.</p>","type":{"names":["object"]}},{"name":"options.skip","optional":true,"description":"<p>If true, the query execution is skipped.</p>","type":{"names":["boolean"]}},{"name":"options.fetchPolicy","optional":true,"description":"<p>The fetch policy for the query (e.g., 'cache-first', 'network-only', 'cache-and-network', etc.).</p>","type":{"names":["string"]}},{"name":"options.notifyOnNetworkStatusChange","optional":true,"description":"<p>If true, the component will re-render when the network status changes.</p>","type":{"names":["boolean"]}},{"name":"options.pollInterval","optional":true,"description":"<p>The interval (in milliseconds) for polling the query.</p>","type":{"names":["boolean"]}}],"returns":[{"description":"<ul>\n<li>An object containing the query result and related information.</li>\n</ul>","type":{"names":["object"]}}],"scope":"static","readonly":null,"kind":"function","examples":["import { FlexDataClient } from '@twilio/flex-ui';\nimport { GET_USER } from './queries'; // Import your GraphQL query\n\nfunction UserProfile({ userId }) {\n  const { loading, error, data } = FlexDataClient.useFlexQuery(GET_USER, {\n    variables: { id: userId },\n  });\n\n  if (loading) return <p>Loading...</p>;\n  if (error) return <p>Error: {error.message}</p>;\n\n  const user = data.user;\n\n  return (\n    <div>\n      <h1>{user.username}</h1>\n      <p>Email: {user.email}</p>\n    </div>\n  );\n}"]},{"name":"useFlexMutation","docName":null,"longname":"FlexDataClient.useFlexMutation","description":"<p>useFlexMutation is a React hook for executing GraphQL mutations within a React components.\nIt provides a function to trigger the mutation and returns an object with mutation-related information and functions.</p>","defaultvalue":null,"type":null,"properties":null,"params":[{"name":"mutation","optional":null,"description":"<p>The GraphQL mutation document.</p>","type":{"names":["object"]}},{"name":"options","optional":true,"description":"<p>An options object that allows you to customize the behavior of the mutation.</p>","type":{"names":["object"]}},{"name":"options.update","optional":true,"description":"<p>A function to update the GraphQL client cache after a successful mutation.</p>","type":{"names":["object"]}},{"name":"options.onCompleted","optional":true,"description":"<p>A callback function to be executed when the mutation is completed successfully.</p>","type":{"names":["boolean"]}},{"name":"options.onError","optional":true,"description":"<p>A callback function to handle errors that occur during the mutation.</p>","type":{"names":["string"]}},{"name":"options.ignoreResults","optional":true,"description":"<p>If true, the mutation response will not be automatically written to the client cache.</p>","type":{"names":["boolean"]}}],"returns":[{"description":"<ul>\n<li>A tuple containing the mutation function and an object with mutation-related information:\n<ul>\n<li>{MutationFunction} mutationFn - The mutation function that can be invoked to trigger the mutation.</li>\n<li>{boolean} loading - Indicates whether the mutation is currently in progress.</li>\n<li>{Error | null} error - Contains any errors that occurred during the mutation.</li>\n<li>{Object | null} data - Contains the result data from the mutation when it's successful.</li>\n</ul>\n</li>\n</ul>","type":{"names":["object"]}}],"scope":"static","readonly":null,"kind":"function","examples":["// Using useFlexMutation in a React component:\nimport { FlexDataClient } from '@twilio/flex-ui';\n\nconst { useFlexMutation, gql } = FlexDataClient';\n\nconst MY_MUTATION = gql`\n  mutation MyMutation($input: MyInput!) {\n    myMutation(input: $input) {\n      // Your mutation fields here\n    }\n  }\n`;\n\nfunction MyComponent() {\n  const [mutationFn, { loading, error, data }] = useFlexMutation(MY_MUTATION);\n\n  const handleButtonClick = () => {\n    mutationFn({\n      variables: { input: 'your_input_data_here' },\n      // Optional: You can use 'update', 'onCompleted', and 'onError' callbacks here.\n    });\n  };\n\n  return (\n    <div>\n      <button onClick={handleButtonClick} disabled={loading}>\n        {loading ? 'Loading...' : 'Execute Mutation'}\n      </button>\n      {error && <p>Error: {error.message}</p>}\n      {data && <p>Mutation Result: {JSON.stringify(data)}</p>}\n    </div>\n  );\n}"]},{"name":"gql","docName":null,"longname":"FlexDataClient.gql","description":"<p>Utility function for parsing GraphQL query strings into the standard GraphQL AST.\nIt parses a GraphQL query string into a GraphQL DocumentNode using tagged template literals.</p>","defaultvalue":null,"type":null,"properties":null,"params":[{"name":"templateStrings","optional":null,"description":"<p>An array of string literals from the template literal.</p>","type":{"names":["TemplateStringsArray"]}}],"returns":[{"description":"<ul>\n<li>The parsed GraphQL DocumentNode representing the query or mutation.</li>\n</ul>","type":{"names":["object"]}}],"scope":"static","readonly":null,"kind":"function","examples":["import { FlexDataClient } from '@twilio/flex-ui';\n\n// Define a GraphQL query using gql\nconst GET_USER = FlexDataClient.gql`\n  query GetUser($userId: ID!) {\n    user(id: $userId) {\n      id\n      username\n      email\n    }\n  }\n`;"]}]},"interfacesQuery":{"nodes":[{"name":"TaskStatusBasedType","docName":null,"longname":"TaskStatusBasedType","description":"<p>Used to define a value based on task status. TaskStatusBasedType accepts a type parameter T which defaults to string.</p>\n<p>The valid types are: T, TaskCallbackType<T> and TaskStatusBasedTypeBase<T><br></p>\n<ul>\n<li>T is a generic type.<br></li>\n<li>TaskCallbackType is a function to provide values for Flex. Called from various areas of Flex.<br></li>\n<li>TaskStatusBasedTypeBase is an object with ReservationStatus as its key and the parameter type T as the value.</li>\n</ul>","defaultvalue":null,"type":null,"properties":null,"params":null,"returns":null},{"name":"Actions","docName":null,"longname":"Actions","description":"<p>Predefined UI actions</p>","defaultvalue":null,"type":null,"properties":[],"params":null,"returns":null},{"name":"LocalizationType","docName":null,"longname":"LocalizationType","description":"<p>Localization Type object containing the locale tag, available locales, and a function to set the locale preference</p>","defaultvalue":null,"type":null,"properties":[{"name":"localeTag","type":{"names":["string"]},"description":"<p>The preferred locale of the user</p>","optional":null,"defaultvalue":""},{"name":"availableLocales","type":{"names":["Array<AvailableLocale>"]},"description":"<p>The available locales in Flex UI</p>","optional":null,"defaultvalue":""},{"name":"setLocalePreference","type":{"names":["function"]},"description":"<p>An async function which sets the preference of the user</p>","optional":null,"defaultvalue":""}],"params":null,"returns":null},{"name":"Strings","docName":null,"longname":"Strings","description":"<p>You can override any string in Flex by editing the strings object on the Flex Manager instance.\nLanguage strings can technically contain any HTML tag like <code>h1</code>, <code>h2</code>, <code>p</code> or even <code>iframe</code>.\nThe Flex UI will not filter these values. Flex uses Handlebars for templating and supports Mustache-style syntax and\nexpressions within content strings, ie. embedding value placeholders between double braces <code>{ }</code>.</p>","defaultvalue":null,"type":null,"properties":[],"params":null,"returns":null},{"name":"AvailableLocale","docName":null,"longname":"AvailableLocale","description":"<p>Available locale containing the tag and name</p>","defaultvalue":null,"type":null,"properties":[{"name":"tag","type":{"names":["string"]},"description":"<p>The language tag of the locale</p>","optional":null,"defaultvalue":""},{"name":"name","type":{"names":["string"]},"description":"<p>The name of the locale</p>","optional":null,"defaultvalue":""}],"params":null,"returns":null},{"name":"AgentCopilotState","docName":null,"longname":"AgentCopilotState","description":"<p>Agent Copilot State for current Agent</p>","defaultvalue":null,"type":null,"properties":[{"name":"config","type":{"names":["AgentCopilotConfigState"]},"description":"<p>AgentCopilotConfigState</p>","optional":null,"defaultvalue":""}],"params":null,"returns":null},{"name":"AgentCopilotConfigState","docName":null,"longname":"AgentCopilotConfigState","description":"<p>Agent Copilot Configuration State for current Agent</p>","defaultvalue":null,"type":null,"properties":[{"name":"enabledQueues","type":{"names":["Array<string>"]},"description":"<p>List of queue SIDs that have Agent Copilot enabled, or all queues if empty</p>","optional":true,"defaultvalue":""},{"name":"displayNotes","type":{"names":["boolean"]},"description":"<p>Whether or not the Notes tab and related components are visible in the UI</p>","optional":null,"defaultvalue":""},{"name":"displaySentiment","type":{"names":["boolean"]},"description":"<p>Whether or not the sentiment input field is visible in the UI</p>","optional":null,"defaultvalue":""},{"name":"multiLanguageEnabled","type":{"names":["boolean"]},"description":"<p>Whether or not multilanguage is enabled for the account</p>","optional":null,"defaultvalue":""}],"params":null,"returns":null},{"name":"AppStatusState","docName":null,"longname":"AppStatusState","description":"<p>State of the view</p>","defaultvalue":null,"type":null,"properties":[{"name":"isAppStatusPanelOpen","type":{"names":["boolean"]},"description":"<p>whether the navigation sidebar is open</p>","optional":null,"defaultvalue":""}],"params":null,"returns":null},{"name":"ConferencesState","docName":null,"longname":"ConferencesState","description":"<p>State for known conferences</p>","defaultvalue":null,"type":null,"properties":[{"name":"states","type":{"names":["Map<string, ConferencesState.ConferenceState>"]},"description":"<p>active conferences states by conference SID</p>","optional":null,"defaultvalue":""}],"params":null,"returns":null},{"name":"ConnectionStatus","docName":null,"longname":"ConnectionStatus","description":"<p>Connection status</p>","defaultvalue":null,"type":null,"properties":[{"name":"timestampLastConnected","type":{"names":["number"]},"description":"<p>timestamp of last connection</p>","optional":null,"defaultvalue":""},{"name":"connectionState","type":{"names":["SyncClient.ConnectionState"]},"description":"<p>connection state of the sync client</p>","optional":null,"defaultvalue":""}],"params":null,"returns":null},{"name":"PhoneState","docName":null,"longname":"PhoneState","description":"<p>Voice call state</p>","defaultvalue":null,"type":null,"properties":[{"name":"listener","type":{"names":["DeviceListener"]},"description":"<p>device listener</p>","optional":true,"defaultvalue":""},{"name":"activeCall","type":{"names":["Call"]},"description":"<p>Source call object. <a href=\"https://www.twilio.com/docs/voice/sdks/javascript/twiliocall\">See</a></p>","optional":true,"defaultvalue":""}],"params":null,"returns":null},{"name":"SessionState","docName":null,"longname":"SessionState","description":"<p>Active session state</p>","defaultvalue":null,"type":null,"properties":[{"name":"identity","type":{"names":["string"]},"description":"<p>identity of a logged-in user</p>","optional":true,"defaultvalue":""},{"name":"loginError","type":{"names":["any"]},"description":"<p>last error that occurred when logging in</p>","optional":true,"defaultvalue":""},{"name":"loginState","type":{"names":["LoginState"]},"description":"<p>current state of the session</p>","optional":true,"defaultvalue":""},{"name":"ssoTokenPayload","type":{"names":["SSOTokenPayload"]},"description":"<p>SSO token payload</p>","optional":true,"defaultvalue":""},{"name":"degraded","type":{"names":["boolean"]},"description":"<p>Indicates if session is degraded</p>","optional":true,"defaultvalue":""}],"params":null,"returns":null},{"name":"SupervisorState","docName":null,"longname":"SupervisorState","description":"<p>State of the supervisor view</p>","defaultvalue":null,"type":null,"properties":[{"name":"callMonitoring","type":{"names":["CallMonitoring"]},"description":"<p>state of call monitoring</p>","optional":null,"defaultvalue":""},{"name":"stickyWorker","type":{"names":["SupervisorWorkerState"]},"description":"<p>currently selected worker state</p>","optional":true,"defaultvalue":""},{"name":"workers","type":{"names":["Array<SupervisorWorkerState>"]},"description":"<p>currently showing worker states</p>","optional":null,"defaultvalue":""},{"name":"isLoadingWorkers","type":{"names":["boolean"]},"description":"<p>if workers are being loaded</p>","optional":null,"defaultvalue":""},{"name":"errorLoadingWorkers","type":{"names":["LiveQueryError"]},"description":"<p>instance of the error when loading workers</p>","optional":null,"defaultvalue":""},{"name":"appliedFilters","type":{"names":["Array<AppliedFilter>"]},"description":"<p>array of applied filters</p>","optional":null,"defaultvalue":""},{"name":"extraFilterQuery","type":{"names":["string"]},"description":"<p>query for custom filters</p>","optional":null,"defaultvalue":""},{"name":"search","type":{"names":["string"]},"description":"<p>search string</p>","optional":null,"defaultvalue":""}],"params":null,"returns":null},{"name":"ViewState","docName":null,"longname":"ViewState","description":"<p>State of the view</p>","defaultvalue":null,"type":null,"properties":[{"name":"isSideNavOpen","type":{"names":["boolean"]},"description":"<p>whether the navigation sidebar is open</p>","optional":null,"defaultvalue":""},{"name":"isOutboundDialerOpen","type":{"names":["boolean"]},"description":"<p>whether the navigation sidebar is open</p>","optional":null,"defaultvalue":""},{"name":"activeView","type":{"names":["string"]},"description":"<p>name of the currently active view</p>","optional":true,"defaultvalue":""},{"name":"selectedTaskSid","type":{"names":["string"]},"description":"<p>ID of the selected task in Agent Desktop view</p>","optional":true,"defaultvalue":""},{"name":"selectedTaskInSupervisorSid","type":{"names":["string"]},"description":"<p>ID of the selected task in Teams view</p>","optional":true,"defaultvalue":""},{"name":"selectedWorkerInSupervisorSid","type":{"names":["string"]},"description":"<p>ID of the selected worker in Teams view</p>","optional":true,"defaultvalue":""},{"name":"isDirectoryOpen","type":{"names":["boolean"]},"description":"<p>whether the call transfer panel is open in Agent Desktop view</p>","optional":true,"defaultvalue":""},{"name":"componentViewStates","type":{"names":["object"]},"description":"<p>object containing persistent components states. Use {@link Actions.SetComponentState} to update.</p>","optional":null,"defaultvalue":""}],"params":null,"returns":null},{"name":"WorkerState","docName":null,"longname":"WorkerState","description":"<p>Worker state based on Worker SDK</p>","defaultvalue":null,"type":null,"properties":[{"name":"tasks","type":{"names":["Map<string, ITask>"]},"description":"<p>map of active tasks by reservation SID</p>","optional":null,"defaultvalue":""},{"name":"activity","type":{"names":["Activity"]},"description":"<p>current <a href=\"https://twilio.github.io/twilio-taskrouter.js/Activity.html\">Activity</a> of the worker.</p>","optional":null,"defaultvalue":""},{"name":"activities","type":{"names":["Map<string, Activity>"]},"description":"<p>map of all <a href=\"https://twilio.github.io/twilio-taskrouter.js/Activity.html\">Activities</a> instances by SID.</p>","optional":null,"defaultvalue":""},{"name":"attributes","type":{"names":["object"]},"description":"<p>attributes of the <a href=\"https://twilio.github.io/twilio-taskrouter.js/Worker.html\">Worker</a>.</p>","optional":null,"defaultvalue":""},{"name":"worker","type":{"names":["IWorker"]},"description":"<p>current worker instance.</p>","optional":null,"defaultvalue":""}],"params":null,"returns":null},{"name":"FlexState","docName":null,"longname":"FlexState","description":null,"defaultvalue":null,"type":null,"properties":[{"name":"flex","type":{"names":["AppState"]},"description":"<p>Flex application state</p>","optional":null,"defaultvalue":""}],"params":null,"returns":null},{"name":"ChatTaskChannelConfiguration","docName":null,"longname":"ChatTaskChannelConfiguration","description":"<p>Interface to define an object with the parameters needed to configure a Chat Task Channel</p>","defaultvalue":null,"type":null,"properties":[{"name":"name","type":{"names":["string"]},"description":"<p>name of the task channel definition</p>","optional":null,"defaultvalue":""},{"name":"isApplicable","type":{"names":["TaskChannelDefinition.TaskChannelApplicableCb"]},"description":"<p>Callback to determine whether this task channel is applicable for a given task.</p>","optional":null,"defaultvalue":""},{"name":"icon","type":{"names":["string","React.ReactNode"]},"description":"<p>main icon to render for the task channel</p>","optional":true,"defaultvalue":""},{"name":"iconActive","type":{"names":["string","React.ReactNode"]},"description":"<p>active icon to render for the task channel</p>","optional":true,"defaultvalue":""},{"name":"color","type":{"names":["string"]},"description":"<p>main color to be used</p>","optional":true,"defaultvalue":""},{"name":"reservedTemplate","type":{"names":["string"]},"description":"<p>template string for pending chat request</p>","optional":true,"defaultvalue":""},{"name":"charLimit","type":{"names":["number"]},"description":"<p>message character limit for task channel with chat capabilities</p>","optional":true,"defaultvalue":""},{"name":"taskHeaderAcceptedTemplate","type":{"names":["string"]},"description":"<p>template string for chat task in accepted state</p>","optional":true,"defaultvalue":""},{"name":"taskLineChatAssignedTemplate","type":{"names":["string"]},"description":"<p>template string for an assigned chat task</p>","optional":true,"defaultvalue":""},{"name":"taskLineChatWrapupTemplate","type":{"names":["string"]},"description":"<p>template string for an wrapping up chat task</p>","optional":true,"defaultvalue":""},{"name":"notificationTitleTemplate","type":{"names":["string"]},"description":"<p>template string for in-app notification title of chat task</p>","optional":true,"defaultvalue":""},{"name":"browserNotificationTitleTemplate","type":{"names":["string"]},"description":"<p>template string for browser notification title of chat task</p>","optional":true,"defaultvalue":""},{"name":"browserNotificationBodyTemplate","type":{"names":["string"]},"description":"<p>template string for browser notification body of chat task</p>","optional":true,"defaultvalue":""},{"name":"contentTabHeaderTemplate","type":{"names":["string"]},"description":"<p>template string for header of content tab for chat tasks</p>","optional":true,"defaultvalue":""},{"name":"endButtonTemplates","type":{"names":["Record<string, any>"]},"description":"<p>template strings for button to end chat task</p>","optional":true,"defaultvalue":""}],"params":null,"returns":null},{"name":"NotificationHandler","docName":null,"longname":"NotificationHandler","description":"<p>Notification Handler interface.</p>","defaultvalue":null,"type":null,"properties":[],"params":null,"returns":null},{"name":"ButtonThemeProps","docName":null,"longname":"Theme.ButtonThemeProps","description":null,"defaultvalue":null,"type":null,"properties":[{"name":"disabledColor","type":{"names":["string"]},"description":"<p>Use the disabled color</p>","optional":true,"defaultvalue":""},{"name":"lightHover","type":{"names":["boolean"]},"description":"<p>Use the light hover effect</p>","optional":true,"defaultvalue":""},{"name":"disabledColor","type":{"names":["string"]},"description":"<p>Use the disabled color</p>","optional":true,"defaultvalue":""},{"name":"lightHover","type":{"names":["boolean"]},"description":"<p>Use the light hover effect</p>","optional":true,"defaultvalue":""}],"params":null,"returns":null}]}},"pageContext":{"name":"FlexDataClient","docName":"Flex Data Client"}},
    "staticQueryHashes": ["2573139180","3167116022","426031883"]}