Skip to content
Developer home
X3

App component and GraphQL client

  Less than to read

Starting with Visual Studio Code

In Visual Studio locate and open the folder x3-react-graphql created in the Before you begin section:

  1. Clean up anything that is not needed (but you can continue without cleaning up):

    • Remove :
      • src/__spec_helper__
      • src/components/__snapshots__
      • src/components/hello-world.js
      • src/components/hello-world.spec.js
  2. Open package.json:

    • Add GraphQL dependecies to our package.json:

      "apollo": "^2.21.1",
      "apollo-cache-inmemory": "^1.6.3",
      "apollo-client": "^2.6.4",
      "apollo-server": "^2.9.16",
      "react-apollo": "^3.1.3",
      
    • Update carbon-react to our package.json:

      "carbon-react": "12.2.0",
      
  3. Create a new file queries.js which contains 2 queries under src folder:

    import gql from 'graphql-tag';
    
    export const customerListQuery = gql`
      {
        sage {
          x3BusinessPartners {
            customer(orderBy: "{ code: 1  }", first: 5) {
              edges {
                node {
                  code
                  companyName
                }
              }
            }
          }
        }
      }
    `;
    
    export const orderDetailsQuery = gql`
      query GetOrderDetails($soldToCustomer: String, $orderBy: String) {
        sage {
          x3Sales {
            salesOrder(filter: $soldToCustomer, orderBy: $orderBy) {
              edges {
                node {
                  id
                  orderDate
                  shipmentDate
                  soldToCustomer {
                    code
                    companyName
                  }
                  orderStatus
                  currency {
                    code
                  }
                  lines {
                    edges {
                      node {
                        lineNumber
                        sequenceNumber
                        quantityInSalesUnitOrdered
                        grossPrice
                        product {
                          localizedDescription1
                          image {
                            value
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    `;
    
  4. Add an default page encapsulated in EmptyState function (utils.js):

    import * as React from 'react';
    import Heading from 'carbon-react/lib/components/heading';
    import Link from 'carbon-react/lib/components/link';
    
    export default function EmptyState() {
        return (
            <div className='se-page-placeholder'>
            <Heading
                divider={ false }
                title='Select a function to start'
            />
            <br />
            <br />
                        This application is built using the Sages open-source{' '}
            <Link href='https://github.com/Sage/carbon'>Carbon component library</Link>.
            <br />
                        The data is retrieved from Sage X3{' '}
            <Link href='https://developer.sage.com/api/x3/graphql/'>GraphQL API</Link>.
            </div>
        );
    }
    
  5. Add App component for our application (app.js):

    import * as React from 'react';
    import EmptyState from './utils';
    
    export default class App extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
            mode: ''
            };
        }
    
        render() {
            return (
                <>
                {!this.state.mode && <EmptyState />}
            </>
            );
        }
    }
    
  6. Connect this App in to the main component (main.js):

    import React from 'react';
    import * as ReactDOM from 'react-dom';
    import { ApolloProvider } from 'react-apollo';
    import { ApolloClient } from 'apollo-client';
    import { createHttpLink } from 'apollo-link-http';
    import { InMemoryCache } from 'apollo-cache-inmemory';
    
    import { ThemeProvider } from 'styled-components';
    import Aegean from 'carbon-react/lib/style/themes/aegean';
    
    // Loads base css from carbon:
    import 'carbon-react/lib/utils/css';
    import App from './app';
    
    const httpLink = createHttpLink({
      uri: '/demo/service/X3CLOUDV2_SEED/graphql'
    });
    
    const client = new ApolloClient({
      link: httpLink,
      cache: new InMemoryCache()
    });
    
    ReactDOM.render(
      <ApolloProvider client={ client }>
        <ThemeProvider theme={ Aegean }>
          <App />
        </ThemeProvider>
      </ApolloProvider>,
      document.getElementById('app')
    );
    
    // Enables hot reloading through webpack:
    if (module.hot) {
      module.hot.accept();
    }
    
  7. In the end of this step we have this file structure:

    Step 3

    Then you can run npm install then npm start to see the default page (EmptyState)

    Step 3

    You can also download the VSCode project at the end of this step.


Steps