Join us live as we unveil the all new Hygraph Studio!

Hygraph
Docs

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