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:
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
libs |-- 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 | |-- 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 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.