SMAG Directory Structure — Part 3
Data GraphQL Directory Structure
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, you will have to choose a client to use with GraphQL. Without going to into detail, we will be using Angular Apollo Client as we truly believe it is best client for GraphQL . Within Apollo, there are numerous different files that one can create to interact with GraphQL.
Four Types of Apollo Client Files
Most notably there are four different types:
This article, of course, is not a time for us to go into detail for each. However, the question is, where within our Angular Directory Structure should we go ahead and 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, for
instance, in numerous ways. 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
│ ├── data-graphql/
│ │ ├── src/
│ │ │ ├── lib/
│ │ │ │ ├── user/
│ │ │ │ │ ├── user.fragments.ts
│ │ │ │ │ ├── user.mutations.ts
│ │ │ │ │ ├── user.queries.ts
│ │ │ │ │ └── user.subscriptions.ts
│ │ ├── index.ts
│ │ └── test.ts
│ ├── karma.conf,file
│ ├── README.md,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 alleviates the potential issues we mentioned above. In addition, by prepending data to graphql, forming data-graphql, this folder will be put next to the other folders in our app
Thank you for reading, and keep being amazing you!