Use Apollo Client with Flex UI

Overview

Flex UI uses Apollo Client and an ApolloProvider to internally communicate with Twilio's GraphQL API. This architecture allows both native and custom Flex UI components to exchange data using GraphQL.

Use your GraphQL APIs with custom FLex UI components

Sometimes, you might want your custom Flex UI components to call a different GraphQL API, instead of Twilio's GraphQL API.

If you attempt to wrap the Flex UI RootContainer around a custom ApolloProvider, Flex still defaults to Twilio's GraphQL API. That's because Flex's ApolloProvider is already in place, and anything inside it uses Twilio's API as the default client. In this case, your customization won't work as expected.

If you want to use your own custom GraphQL service inside a Flex UI component, use the client option in Apollo hooks, like useQuery. This solution lets you specify which Apollo Client instance to use for that request. For more details, see Apollo's documentation on the useQuery API.

Example: Flex UI plugin

If you're using a custom GraphQL API inside a Flex UI plugin, use the following approach. Inside your plugin component, you can create and use a custom Apollo Client.

1// MyCustomGraphQLComponent.js
2
3import { ApolloClient, ApolloProvider, gql, InMemoryCache, useQuery } from "@apollo/client";
4import * as React from "react";
5
6const customerGraphQLClient = new ApolloClient({
7    uri: 'https://my-custom-graphql-api.com/',
8    cache: new InMemoryCache()
9});
10
11const CUSTOMER_QUERY = gql`
12    query GetLocations {
13        locations {
14            id
15            name
16            description
17        }
18    }
19`;
20
21const CustomGraphQLChildComponent = () => {
22    const { data, error, loading } = useQuery(CUSTOMER_QUERY);
23
24    if (loading) {
25        return <div>Loading...</div>;
26    }
27    if (error) {
28        return <div>Error: {(error as any).message}</div>;
29    }
30
31    return (
32        <div>
33            <pre>data: {JSON.stringify(data, null, 2)}</pre>
34        </div>
35    );
36};
37
38export const MyCustomGraphQLComponent = () => (
39    <ApolloProvider client={customerGraphQLClient}>
40        <CustomGraphQLChildComponent />
41    </ApolloProvider>
42);

1// GraphQLComponentPlugin.js
2import { FlexPlugin } from 'flex-plugin';
3import React from 'react';
4import { MyCustomGraphQLComponent } from './MyCustomGraphQLComponent';
5
6const PLUGIN_NAME = 'GraphQLComponent';
7
8export default class GraphQLComponentPlugin extends FlexPlugin {
9  constructor() {
10    super(PLUGIN_NAME);
11  }
12
13  /**
14   * This code runs when your plugin starts 
15   * Use this to modify any UI components or attach to the actions framework
16   *
17   * @param flex { typeof import('@twilio/flex-ui') }
18   * @param manager { import('@twilio/flex-ui').Manager }
19   */
20  init(flex, manager) {
21    flex.TaskInfoPanel.Content.add(<MyCustomGraphQLComponent' key="gql-component"/>);
22  }
23}
24

Example: Self-hosted Flex UI

If you're hosting Flex UI yourself, you can define a custom Apollo Client and use it directly inside your components.

1import React from 'react';
2import * as Flex from '@twilio/flex-ui';
3import { ApolloClient, InMemoryCache, gql } from '@apollo/client';
4import { ApolloProvider, useQuery } from '@apollo/client/react';
5
6const customerGraphQLClient = new ApolloClient({
7  uri: 'https://my-custom-graphql-api.com/',
8  cache: new InMemoryCache(),
9});
10
11const CUSTOMER_QUERY = gql`
12  query GetLocations {
13    locations {
14       id
15	name
16       description
17    }
18  }
19`;
20
21const MyCustomGraphQLComponent = () => {
22  const { loading, error, data } = useQuery(CUSTOMER_QUERY, {
23    client: customerGraphQLClient, // This code is required so the component queries your custom GraphQL endpoint instead of Twilio's 
24  });
25
26    if (loading) {
27        return <div>Loading...</div>;
28    }
29    if (error) {
30        return <div>Error: {(error as any).message}</div>;
31    }
32
33    return (
34        <div>
35            <pre>data: {JSON.stringify(data, null, 2)}</pre>
36        </div>
37    );
38};
39
40export const App = ({ manager }) => {
41    Flex.TaskInfoPanel.Content.add(<MyCustomGraphQLComponent key="gql-component"/>);
42
43    return (
44      <ApolloProvider client={customerGraphQLClient}>
45        <Flex.ContextProvider manager={manager}>
46          <Flex.RootContainer />
47        </Flex.ContextProvider>
48      </ApolloProvider>
49    );
50  }
51}
52
53export default App;