SMAG Architecture — Part 3

GraphQL Directory Structure - Angular: The Full Gamut Edition

Charlie Greenman
September 16, 2020
2 min read

Assumption Made

This is Part 3 of a 5 part series. Feel free to check out part 2 on data-services.

Assuming your app is using GraphQL, we will be using Angular Apollo Client. We truly believe it is best client for GraphQL. Within Apollo, there are many different files that one can create to interact with GraphQL.

Four Types of Apollo Client Files

Most notably there are four different types:

  1. Fragments
  2. Queries
  3. Mutations
  4. Subscriptions

This article is not a time for us to go into detail for each. However, the question is, where within our Angular Directory Structure should we put these Apollo Client files within our Angular app?

Dissecting the Purpose of Apollo Client Files

It’s important to understand that Apollo Client queries, mutations, and subscriptions will not only be used with their respective data-service. It is quite possible that multiple services will be using the same query. In addition, the fragments used for a particular GraphQL query, mutation, or subscription, will be used within multiple Apollo Client files. It therefore make sense for all of the Apollo Client files to be placed in their own distinct folder within the libs folder(assuming we are using a mono repo), for the particular app. So now that we have decided it should warrant it’s own folder, let’s take a quick look at how the Directory Structure might look like.

Data GraphQL Data Structure

|-- px-illustrator/
|   |-- data-graphql/
|   |   |-- src/
|   |   |   |-- lib/
|   |   |   |   |-- user/
|   |   |   |   |   |-- user.fragments.ts
|   |   |   |   |   |-- user.mutations.ts
|   |   |   |   |   |-- user.queries.ts
|   |   |   |   |   +-- user.subscriptions.ts
|   |   |-- index.ts
|   |   +-- test.ts
|   |-- karma.conf,file
|   |--,file
|   |-- tsconfig.lib,file
|   |-- tsconfig.lib.json,file
|   |-- tsconfig.spec.json,file]
|   +-- tslint.json,file

As we proposed, all files related to GraphQL are exclusively put into a single data-graphql folder. This eases the potential issues we mentioned above. In addition, by pre-pending data to graphql, forming data-graphql, this folder will be put next to the other folders in our app.

Thank you for reading.

Subscribe to the Razroo Angular Newsletter!

Razroo takes pride in it's Angular newsletter, and we really pour heart and soul into it. Pass along your e-mail to recieve it in the mail. Our commitment, is to keep you up to date with the latest in Angular, so you don't have to.

More articles similar to this