anchor.diff:  
   link:https://graphql.org/learn/queries/#fragments[GraphQL fragments] are used to structure the query and are generally useful when loading multi-level navigations.
   
  +TIP: In this example we are using hooks. If you want to know more, we recommend reading the link:https://reactjs.org/docs/hooks-intro.html[official introduction].
  +
   TIP: Define the needed information per level of your navigation and re-use the fragment to keep the GraphQL query well-arranged.
   
   NOTE: Add the `api.js` file to your `src` directory. 
  
positive.code: .api.js
  [source,js]
  ----
  {
  import {useState, useEffect} from 'react';
  
  export async function getNavigation() {
  
negative.code: 
  Before we can read our data via GraphQL we need to assign the read permission to the newly created project. We need to apply the read permission *recusively* so that it will be applied to all created nodes. Otherwise we would need to deal with authentication in our frontend app. 
  
  By default all unauthenticated requests to Gentics Mesh will fall back to use the `anonymous user` and the assigned `anonymous role`. This is very useful if you just want to serve data publicly without any authentication. This mechanism can of course be turned off in the `mesh.yml` file.
  
  image:../role-permissions.png[Role Permissions, role="img-responsive"]
  
  