GraphGL

Frontend communicates with the backend via GraphQL and use SSR to fetching data. The GraphQL queries are defined in the graphql/queries or graphql/mutation folder. The queries are then used in the frontend components.

Generate GraphQL Types

VitNode use GraphQL Codegen (opens in a new tab) to generate types for GraphQL queries. The types are generated in the graphql/hooks.ts file.

Find Query or Mutation

First we need to define the GraphQL query in the graphql/queries/${module_name} (if you want query) or graphql/mutations/${module_name} folder.
You can find list of available queries in your API.

If you are running development server go to http://localhost:8080/graphql (opens in a new tab) to see the list of available queries.

Define Query

When you find the query or mutation you want to use, copy the query/mutation and paste it in a new file with .gql extension. Remember to sort the query by module.

For example file graphql/queries/module_name/authorization.gql:

query Authorization_custom_app {
  authorization_custom_app {
    user {
      email
    }
  }
}

Generate Types

After defining the query, you can generate the types by running the following command:

pnpm codegen

The command will overwrite the graphql/hooks.ts file.

Breadcrumbs Fetch & Revalidate Data