Introduction 👋

After the authentication system and the preparation for the connection to Hasura (previous episode), we can now move to implementing the actual functionality of the application.

GraphQL Queries 🔎

With the codegen in place, creating new GraphQL requests is just a matter of writing new operations as .graphql files.

For example, this is the operation that fetches the products for a user:

query Products {
  products(order_by: { name: asc }) {
    id
    name
    code
  }
}

Notice how there is no mention of the user's id? This is because Hasura is able to extract this information from the signed JWT token and enforces all defined authentication rules.

For example, the access on the products table is defined in a yaml file as follows:

table:
  name: products
  schema: public
...
select_permissions:
- permission:
    columns:
    - code
    - created_at
    - id
    - name
    - user_id
    filter:
      user_id:
        _eq: X-Hasura-User-Id
  role: user
...

Generated hooks 🪝

Running the generation script, we receive new objects that can be used with urql hooks:

const [{ fetching, error, data }] = useQuery({ query: ProductsDocument });

// ...

return (
  <View>
    {error ? (
      <Text>{error.toString()}</Text>
    ) : fetching || !data ? (
      <ActivityIndicator />
    ) : (
      <SomeList data={data} />
    )}
  </View>
);

The result ✅

Through a combination of new GraphQL operations and the related screens and components I was able to have a fully functional MVP up and running in relatively little time. [start, end]

Next steps ⭐️

Now that the basic implementation is completed, I want to focus on creating a decent UI and then move on to releasing a first versions on the App Store and Google Play.

Social

"Dispensa" is the Italian word for "Pantry" and my idea is to make an application to track what food is available in your home to make the experience of buying groceries a bit easier.

As always, you can find me on Twitter and GitHub. The code for this project can be found on its GitHub repository