Skip to content
Developer home
Product homepage
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