@machinemetrics/mm-react-tools NPM

mm-react-tools

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

Install

yarn add 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:

yarn add react react-router-dom styled-components @apollo/client subscriptions-transport-ws graphql

Getting Started

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

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

ReactDOM.render(
  <MMProvider
    domain={process.env.REACT_APP_URL}
    clientId={process.env.REACT_APP_CLIENT_ID}
    clientSecret={process.env.REACT_APP_CLIENT_SECRET}
    releaseStage={process.env.REACT_APP_RELEASE_STAGE}
    scope={'reporting'}
  >
    <App />
  </MMProvider>,
  document.getElementById('root')
);

Protect a Route

Use the ProtectedRoute to kick off the login flow.

// App.js
import React from 'react';
import { Route } from 'react-router-dom';
import { PrivateLayout } from 'mm-react-tools';
import PublicPage from './PublicPage';
import PrivatePage from './PrivatePage';

function App() {
  return (
    <Route exact path='/public' element={<PublicPage />} />
    <Route element={<PrivateLayout />}>
      <Route path="/private" element={<PrivatePage />}>
    </Route>
  );
}

export default App;

GraphQL Hooks

Apollo hooks for GraphQL are available via useQuery and useSubscription.

// 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 <div>{company}</div>;
};

export default PrivatePage;