Open Navigation

Demo App Structure

The following tree view shows some of the key files in our demo app:

demo-app-tree-2

Note: The Tray GraphQL API is a backend API only and calls must be invoked server-side. Client-side Javascript calls to the API should not be made as they will be blocked by CORS. Our demo app (built using https://www.apollographql.com/) is a good illustration of how you can create a UI which presents an End User with their available Solutions while making all API calls server-side.

server/graphql.js -- builds the actual graphql queries and mutations

server/api.js -- creates the get and post operations which work on the endpoints (/api/solutions/ etc.) These call the actual queries and mutations in server/graphql.js using e.g. queries.solutionInstances(externalUserToken) and mutations.createSolutionInstance

src/api/solutions.js - this contains end point calls for listing solutions, instances, creating instances, updating instances, getting an instance. These are then available for dealing with the pop-up config process, and are used in the three files below.

src/views/solutionsDiscover.js -- lists Solutions and triggers the Configuration Wizard when an End User clicks to configure a Solution Instance.

src/components/ConfigWizard.js -- sets up the post message event listeners and handles the rendering of an iframe for the Config Wizard, if needed.

src/components/Instance.js -- for when an end user clicks to do more config after they have done initial config.

src/views/SolutionsMine.js -- lists the Solution Instances that a user has activated and configured for their own use.

Was this article helpful?
Yes
No