Flex Data Client

FlexDataClient contains a set utility functions to fetch Flex data using GraphQL syntax.

useFlexQuery(query, options?, options.variables?, options.skip?, options.fetchPolicy?, options.notifyOnNetworkStatusChange?, options.pollInterval?) => object#

useFlexQuery is a React hook that executes GraphQL queries automatically within a React component.

Parameters:

query: object
The GraphQL query document to be executed.
options?: object
Additional options for configuring the query execution.
options.variables?: object
An object containing variables to be used in the query.
options.skip?: boolean
If true, the query execution is skipped.
options.fetchPolicy?: string
The fetch policy for the query (e.g., 'cache-first', 'network-only', 'cache-and-network', etc.).
options.notifyOnNetworkStatusChange?: boolean
If true, the component will re-render when the network status changes.
options.pollInterval?: boolean
The interval (in milliseconds) for polling the query.

Returns:

object
- An object containing the query result and related information.

Example:

import { FlexDataClient } from '@twilio/flex-ui';
import { GET_USER } from './queries'; // Import your GraphQL query

function UserProfile({ userId }) {
  const { loading, error, data } = FlexDataClient.useFlexQuery(GET_USER, {
    variables: { id: userId },
  });

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  const user = data.user;

  return (
    <div>
      <h1>{user.username}</h1>
      <p>Email: {user.email}</p>
    </div>
  );
}

useFlexMutation(mutation, options?, options.update?, options.onCompleted?, options.onError?, options.ignoreResults?) => object#

useFlexMutation is a React hook for executing GraphQL mutations within a React components. It provides a function to trigger the mutation and returns an object with mutation-related information and functions.

Parameters:

mutation: object
The GraphQL mutation document.
options?: object
An options object that allows you to customize the behavior of the mutation.
options.update?: object
A function to update the GraphQL client cache after a successful mutation.
options.onCompleted?: boolean
A callback function to be executed when the mutation is completed successfully.
options.onError?: string
A callback function to handle errors that occur during the mutation.
options.ignoreResults?: boolean
If true, the mutation response will not be automatically written to the client cache.

Returns:

object
- A tuple containing the mutation function and an object with mutation-related information:
  - {MutationFunction} mutationFn - The mutation function that can be invoked to trigger the mutation.
  - {boolean} loading - Indicates whether the mutation is currently in progress.
  - {Error | null} error - Contains any errors that occurred during the mutation.
  - {Object | null} data - Contains the result data from the mutation when it's successful.

Example:

// Using useFlexMutation in a React component:
import { FlexDataClient } from '@twilio/flex-ui';

const { useFlexMutation, gql } = FlexDataClient';

const MY_MUTATION = gql`
  mutation MyMutation($input: MyInput!) {
    myMutation(input: $input) {
      // Your mutation fields here
    }
  }
`;

function MyComponent() {
  const [mutationFn, { loading, error, data }] = useFlexMutation(MY_MUTATION);

  const handleButtonClick = () => {
    mutationFn({
      variables: { input: 'your_input_data_here' },
      // Optional: You can use 'update', 'onCompleted', and 'onError' callbacks here.
    });
  };

  return (
    <div>
      <button onClick={handleButtonClick} disabled={loading}>
        {loading ? 'Loading...' : 'Execute Mutation'}
      </button>
      {error && <p>Error: {error.message}</p>}
      {data && <p>Mutation Result: {JSON.stringify(data)}</p>}
    </div>
  );
}

gql(templateStrings) => object#

Utility function for parsing GraphQL query strings into the standard GraphQL AST. It parses a GraphQL query string into a GraphQL DocumentNode using tagged template literals.

Parameters:

templateStrings: TemplateStringsArray
An array of string literals from the template literal.

Returns:

object
- The parsed GraphQL DocumentNode representing the query or mutation.

Example:

import { FlexDataClient } from '@twilio/flex-ui';

// Define a GraphQL query using gql
const GET_USER = FlexDataClient.gql`
  query GetUser($userId: ID!) {
    user(id: $userId) {
      id
      username
      email
    }
  }
`;