[React] Create React hooks for calling Microsoft Graph

[nmetulev]

Description

Add the following hooks to mgt-react:

• const [isSignedIn] = useIsSignedIn()

• const [response, loading, error, load] = useGet<T = any>(resource, deps, options) where:

  • resource: string - the resource to fetch from the graph (ex: /me)
  • deps: unknown[] - an array of dependencies - values that must be valid before the graph call can be made
  • options: GetOptions - an options array
    • version: string - v1.0 or beta
    • pollingRate: number - if > 0, the resource will be polled every number of milliseconds, default 0. If resource is a delta resource, the hook will use the delta query to only fetch updates and update the response with the updates
    • maxPages: number - number of pages to fetch if the resource is a collection, default 3
    • scopes: string[] - scopes required for this resource - use the provider to get consent from the user before making the call
  • response: T- the response from the graph
  • loading: bool - whether the call to the graph is still loading
  • error: any - any error returned from the graph
  • load(refresh): function - function that can be used to refresh or fetch more pages from the api (pass true to refresh the resource manually, default to false which will fetch more pages for a collection if available)

Internally the useGet hook will useState to create the values that are returned and upon completion of an async operation those values will be updated.

Usage

function App() {

  const [isSignedIn] = useIsSignedIn();
  const [user, userLoading ] = useGet<User>('/me');

  return (
    <div className="App">
      {isSignedIn &&
        <div>
          { !userLoading && <div>
              <h3> Hello {user?.displayName},</h3>
            </div>
          }
        </div>
      }
    </div>
  );
}