MINIMUM SALEOR VERSION
3.5.10
MINIMUM SALEOR CLI VERSION
1.13
By now, you know how to install the template App into Saleor Cloud. Now, you are ready to build its new features. This guide will show you a rather simple workflow of building new functionality for your App. Yet, it is a good starting point for developing more complex things.
After finishing this guide, you'll have accomplished the following:
You will extend the Saleor template App. The App will fetch data from the store about checkouts that for some reason haven't been turned into orders. Such unfinished transactions are usually called abandoned checkouts, and that's going to be the name of your app. You want to display the checkouts id and date of creation in a list.
api/manifest.ts
file:extensions: [
...
{
label: "Abandoned Checkouts",
mount: "NAVIGATION_ORDERS",
target: "APP_PAGE",
permissions: ["MANAGE_PRODUCTS"],
url: "/abandoned-checkouts",
},
],
Heads up!
Make sure the App you want to develop is installed and activated in Saleor Cloud. It is the only context in which the App is functional. So, you develop the App locally but can see the results only in the Dashboard, not the localhost.
You may find the instructions for installing an App in Creating Apps with Saleor CLI guide.
mutation CheckoutCreate {
checkoutCreate(
input: {
channel: "default-channel"
email: "myname@example.com"
lines: []
}
) {
checkout {
token
}
errors {
field
code
}
}
}
You can read more about Saleor GraphQL Playground in the docs.
Since the template App doesn't have the permissions for managing checkouts, every attempt to query checkouts will fail. Hence, we need to update the permissions to enable querying Saleor for the data:
saleor app permission
.MANAGE_CHECKOUTS
permission using arrow keys.It is time to create the query. Remember that the fastest way to build and test queries is by using the Saleor GraphQL Playground. The link to your App's GraphQL Playground in provided in the .env
file of your App.
FetchAllCheckouts.graphql
file in graphql/queries
folder.query FetchAllCheckouts {
checkouts(first: 10) {
edges {
node {
id
created
lines {
variant {
product {
name
thumbnail {
url
alt
}
}
}
}
}
}
}
}
Let's use GraphQL Code Generator to produce the types and hooks which will then be used to build the UI. In the Terminal run:
pnpm run generate
After it has been generated, you may inspect the newly created useFetchAllCheckoutsQuery
hook in the generated/graphql.ts
file.
To provide the list of fetched checkouts let's use the Material UI components, which are pre-installed in the template App. We will present the data in a form of a simple table:
pages
folder create a new file called abandoned-carts.tsx
. and paste the code below:const AbandonedCheckoutsPage: NextPage = () => {
const [{ data, error }] = useFetchAllCheckoutsQuery();
if (!data?.checkouts) {
return <div>Loading...</div>;
}
if (error) {
return <div>{error.message}</div>;
}
return (
<div>
<h1>Abandoned Checkouts</h1>
<main>
{data?.checkouts.edges.length > 0 ? (
<TableContainer component={Paper}>
<Table aria-label="checkouts table">
<TableHead>
<TableRow>
<TableCell>No.</TableCell>
<TableCell>Checkout Id</TableCell>
<TableCell>Created At</TableCell>
</TableRow>
</TableHead>
<TableBody>
{data.checkouts.edges.map((row, i) => (
<TableRow key={row.node.id}>
<TableCell>{i + 1}.</TableCell>
<TableCell>{row.node.id}</TableCell>
<TableCell>{row.node.created}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
) : (
<div>No data to display...</div>
)}
</main>
</div>
);
};
export default AbandonedCheckoutsPage;
In the above code, we utilised useFetchAllCheckoutsQuery()
to pull data from Saleor. Then, we created a table with three columns: No.
, Checkout Id
and Created At
. and iterated over the nodes to display the data in each row.