We're transitioning Studio from Beta to Early Availability
Hygraph
Docs

You are currently reading the Studio Docs. If you were looking for the Classic 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>
  );
}