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 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>
  );
}