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 installation flow

Setup pages handle both installation and configuration once users have already installed the app.

You can use useApp().updateInstallation to set the app's status to PENDING, COMPLETED or DISABLED. You can also use it to store config values.

A simple install flow would be setting the app as COMPLETED, this will create an app installation for the users that go through this flow. It's in a PENDING state, but already installed. This is what that flow would look like in code:

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


function Setup() {
  const { installation } = useApp();
  if (installation.status === 'COMPLETED') {
    return <Configure />;
  }
  return <Install />;
}


function Install() {
  const { updateInstallation } = useApp();


  return (
    <button
      onClick={() => {
        updateInstallation({ status: 'COMPLETED', config: {} });
      }}
    >
      Install App
    </button>
  );
}


function Configure() {
  return <div>Configure</div>;
}


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