Data GraphQL Directory Structure

Charlie Greenman
Apr 13 · 2 min read

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:

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

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?

Data GraphQL Directory Structure

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

├── 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 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!


UI Architecture

Charlie Greenman

Written by

Virtuous ruckus running amok, digitally.



UI Architecture

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade