Easily restore your project to a previous version with our new Instant One-click Backup Recovery
Hygraph
Classic Docs
You are currently reading the Classic Docs. If you were looking for the Studio Docs check here

Develop you app configuration flow

This demo app's configuration flow will involve a mock login process that creates an accessToken, stores it in localStorage, sets an app's status as COMPLETED, and stores a config value.

import React from 'react';
import { useApp, Wrapper } from '@hygraph/app-sdk-react';


function Install() {
  const { accessToken, login } = useLogin();
  const { updateInstallation, installation } = useApp();
  if (accessToken) {
    return <div>Connected as name@example.com</div>;
  }
  if (installation.status === 'COMPLETED') {
    return <div>App installation successful</div>;
  }
  return (
    <button
      onClick={async () => {
        login();
        await updateInstallation({
          status: 'COMPLETED',
          config: { KEY: 'value' },
        });
      }}
    >
      Connect to app
    </button>
  );
}


function useLogin() {
  const [accessToken, setAccessToken] = React.useState<string>('');
  function login() {
    setAccessToken('123456');
    localStorage.setItem('appToken', accessToken);
  }
  return { accessToken, login };
}


export default function Page() {
  return (
    <Wrapper>
      <Install />
    </Wrapper>
  );
}