mm-react-tools

Components, hooks, and helper functions for writing React apps using MachineMetrics APIs.

 

Table of Contents

- [Upgrading to 3.x] (#upgrading-to-3.x)
- Install
- Getting Started
- Client ID and Secret
- License

Upgrading to 3.x

When upgrading to 3.x or newer, there are a few breaking changes that need to be addressed.

- The domain property passed to MMProvider is no longer used so it can be removed. This information is inferred from the URL being loaded.
- If you pass components to MMProvider either directly or in some level more deeply nested within your application, it must be contained within a component.

Install

``bash
npm install @machinemetrics/mm-react-tools
`

Peer Dependencies

Due to how Apollo, React, and other libraries work, there are some additional dependencies that you'll need to include in your project:

`bash
npm install react react-router-dom styled-components @apollo/client
`

Getting Started

Wrap your application in the MMProvider to wire up everything necessary to authenticate against MachineMetrics Cloud with OAuth.

`jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { MMProvider } from '@machinemetrics/mm-react-tools';
import App from './App';

ReactDOM.render(
clientId={process.env.REACT_APP_CLIENT_ID}
clientSecret={process.env.REACT_APP_CLIENT_SECRET}
releaseStage={process.env.REACT_APP_RELEASE_STAGE}
scope={'reporting'}
>

,
document.getElementById('root')
);
`

$3

Use the ProtectedRoute to kick off the login flow.

`jsx
// App.js
import React from 'react';
import { Route, Routes } from 'react-router-dom';
import { PrivateLayout } from '@machinemetrics/mm-react-tools';
import PublicPage from './PublicPage';
import PrivatePage from './PrivatePage';

function App() {
return (

} />
}>
}>


);
}

export default App;
`

$3

Apollo hooks for GraphQL are available via useQuery and useSubscription.

`jsx
// PrivatePage.js
import React, { useEffect, useState } from 'react';
import { gql, useQuery } from '@apollo/client';

const PrivatePage = () => {
const [company, setCompany] = useState();

const query = gql
query {
companies {
name
}
}
;

const { data, loading, error } = useQuery(query);

useEffect(() => {
if (!data || !data.companies || !data.companies.length) {
return;
}

setCompany(data.companies[0].name);
}, [data]);

return

export default PrivatePage;
``

Client ID and Secret

Contact support@machinemetrics.com for a Client ID and Secret.

License

MIT © MachineMetrics