Update / use typescript

11 files changed, 1787 insertions, 0 deletions

diff --git a/src/lib/stores/actions.test.ts b/src/lib/stores/actions.test.ts
new file mode 100644
index 0000000..c650536
--- /dev/null
+++ b/src/lib/stores/actions.test.ts
@@ -0,0 +1,32 @@
+import { enableTopicActions, disableTopicActions, topicActions } from './actions';
+
+describe('Topic actions and state', () => {
+
+  test('There should be no topic actions by default', () => {
+
+    topicActions.subscribe((actions) => {
+
+      expect(actions).toBe(undefined);
+    })();
+  });
+
+  test('enableTopicActions should set the topic id', () => {
+
+    enableTopicActions('free_hat');
+    topicActions.subscribe((actions) => {
+
+      expect(actions).toEqual({
+        id: 'free_hat'
+      });
+    })();
+  });
+
+  test('disableTopicActions should unset the topic id', () => {
+
+    disableTopicActions();
+    topicActions.subscribe((actions) => {
+
+      expect(actions).toEqual(undefined);
+    })();
+  });
+});
diff --git a/src/lib/stores/actions.ts b/src/lib/stores/actions.ts
new file mode 100644
index 0000000..95702dc
--- /dev/null
+++ b/src/lib/stores/actions.ts
@@ -0,0 +1,41 @@
+import { derived, writable } from 'svelte/store';
+import type { Readable, Writable } from 'svelte/store';
+
+export type Actions = {
+  topic?: TopicAction
+};
+
+export type TopicAction = {
+  id: string
+};
+
+/*
+ * This is a store to set the actions in the top header.
+ */
+
+const actions: Writable<Actions> = writable({});
+
+export const enableTopicActions = (id: string) => {
+
+  actions.update((actionsValue: Actions): Actions => {
+
+    actionsValue.topic = {
+      id
+    };
+    return actionsValue;
+  });
+};
+
+export const disableTopicActions = () => {
+
+  actions.update((actionsValue): Actions => {
+
+    delete actionsValue.topic;
+    return actionsValue;
+  });
+};
+
+export const topicActions: Readable<TopicAction> = derived(
+  actions,
+  ($actions) => $actions.topic
+);
diff --git a/src/lib/stores/apollo.ts b/src/lib/stores/apollo.ts
new file mode 100644
index 0000000..12463c3
--- /dev/null
+++ b/src/lib/stores/apollo.ts
@@ -0,0 +1,64 @@
+import { ApolloError } from '@apollo/client/core';
+import { readable } from 'svelte/store';
+import { client } from '$lib/config/apollo';
+import type { DocumentNode, ApolloQueryResult } from '@apollo/client/core';
+
+import type { Readable } from 'svelte/store';
+
+/*
+ * This is a generic store for use with apollo
+ */
+
+type ApolloStoreConfiguration<Type> = {
+  key: string,
+  query: DocumentNode,
+  initialValue?: Type | void
+  variables?: object
+};
+
+type ApolloStoreState<Type> = {
+  loading: boolean,
+  data: Type | void,
+  error: Error | void
+};
+
+export const store = function store<Type>({ key, query, initialValue = null, variables = {} }: ApolloStoreConfiguration<Type>): Readable<ApolloStoreState<Type>> {
+
+  const initialState: ApolloStoreState<Type> = {
+      loading: true,
+      data: initialValue,
+      error: undefined
+  };
+
+  return readable(
+    initialState,
+    (set) => {
+
+      const handleError = function (error: Error) {
+
+        return set({
+          loading: false,
+          data: initialValue,
+          error
+        });
+      };
+
+      client.watchQuery({ query, variables }).subscribe(
+        (result: ApolloQueryResult<Type>) => {
+
+          if (result.errors) {
+            const error = new ApolloError({ graphQLErrors: result.errors });
+            return handleError(error);
+          }
+
+          set({
+            loading: false,
+            data: result.data[key],
+            error: undefined
+          });
+        },
+        (error: Error) => handleError(error)
+      );
+    }
+  );
+};
diff --git a/src/lib/stores/forums.test.ts b/src/lib/stores/forums.test.ts
new file mode 100644
index 0000000..5a8c723
--- /dev/null
+++ b/src/lib/stores/forums.test.ts
@@ -0,0 +1,570 @@
+import { GraphQLInteraction, Pact, Matchers } from '@pact-foundation/pact';
+import { resolve } from 'path';
+
+import { resolveAfter } from '$lib/utils/resolve_after';
+
+const { eachLike, like } = Matchers;
+
+jest.mock('$lib/config/config.ts');
+
+import { getForum, getForums } from './forums';
+
+const internals = {
+  provider: null
+};
+
+describe('Forums store pact', () => {
+
+  beforeAll(async () => {
+
+    internals.provider = new Pact({
+      port: 1234,
+      dir: resolve(process.cwd(), 'pacts'),
+      consumer: 'ForumClient',
+      provider: 'ForumServer',
+      pactfileWriteMode: 'update'
+    });
+
+    await internals.provider.setup();
+  });
+
+  afterEach(() => internals.provider.verify());
+  afterAll(() => internals.provider.finalize());
+
+  describe('When there\'s data', () => {
+
+    describe('GetForums', () => {
+
+      beforeAll(async () => {
+
+        const forumQuery = new GraphQLInteraction()
+          .given('there\'s data')
+          .uponReceiving('a request to list the forums')
+          .withRequest({
+            path: '/graphql',
+            method: 'POST'
+          })
+          .withOperation('GetForums')
+          .withQuery(
+            `query GetForums {
+              forums {
+                id
+                glyph
+                label
+                position
+                __typename
+              }
+            }`
+          )
+          .withVariables({})
+          .willRespondWith({
+            status: 200,
+            headers: {
+              'Content-Type': 'application/json; charset=utf-8'
+            },
+            body: {
+              data: {
+                forums: eachLike({
+                  id: like('butter'),
+                  glyph: like('⌘'),
+                  label: like('test_forums.butter'),
+                  position: like(1)
+                })
+              }
+            }
+          });
+        return await internals.provider.addInteraction(forumQuery);
+      });
+
+      test('it returns the forums', async () => {
+
+        const forums = getForums();
+        const { counter, promise: resolveAfterTwo } = resolveAfter(2);
+        let response = null;
+        forums.subscribe((forumsValue) => {
+
+          response = forumsValue;
+          counter();
+        });
+        expect(response.data).toBeInstanceOf(Array);
+        expect(response.data.length).toBe(0);
+        expect(response.loading).toBe(true);
+        expect(response.error).toBe(undefined);
+        await resolveAfterTwo;
+        expect(response.data).toEqual(expect.arrayContaining([{
+          id: 'butter',
+          glyph: '⌘',
+          label: 'test_forums.butter',
+          position: 1
+        }]));
+        expect(response.loading).toBe(false);
+        expect(response.error).toBe(undefined);
+      });
+    });
+
+    describe('GetForum', () => {
+
+      beforeAll(async () => {
+
+        const forumQuery = new GraphQLInteraction()
+          .given('there\'s data')
+          .uponReceiving('a request to get a single forum')
+          .withRequest({
+            path: '/graphql',
+            method: 'POST'
+          })
+          .withOperation('GetForum')
+          .withQuery(
+            `query GetForum($id: ID!) {
+              forum(id: $id) {
+                id
+                glyph
+                label
+                position
+                topics {
+                  id
+                  title
+                  updated_at
+                  ttl
+                  __typename
+                }
+                __typename
+              }
+            }`
+          )
+          .withVariables({
+            id: 'freezer'
+          })
+          .willRespondWith({
+            status: 200,
+            headers: {
+              'Content-Type': 'application/json; charset=utf-8'
+            },
+            body: {
+              data: {
+                forum: like({
+                  id: 'freezer',
+                  glyph: like('✭'),
+                  label: like('test_forums.freezer'),
+                  position: like(3),
+                  topics: eachLike({
+                    id: like('629de02c-151a-4db7-bb86-43b2add8a15a'),
+                    title: like('Very pacty topic'),
+                    updated_at: like(1619954611616),
+                    ttl: like(3601)
+                  })
+                })
+              }
+            }
+          });
+        return await internals.provider.addInteraction(forumQuery);
+      });
+
+      test('it returns the forum', async () => {
+
+        const forum = getForum('freezer');
+        const { counter, promise: resolveAfterTwo } = resolveAfter(2);
+        let response = null;
+        forum.subscribe((forumsValue) => {
+
+          response = forumsValue;
+          counter();
+        });
+        expect(response.data).toBe(null);
+        expect(response.loading).toBe(true);
+        expect(response.error).toBe(undefined);
+        await resolveAfterTwo;
+        expect(response.data.id).toBe('freezer');
+        expect(response.data.glyph).toBe('✭');
+        expect(response.data.label).toBe('test_forums.freezer');
+        expect(response.data.position).toBe(3);
+        expect(response.data.topics).toEqual(expect.arrayContaining([{
+          id: '629de02c-151a-4db7-bb86-43b2add8a15a',
+          title: 'Very pacty topic',
+          updated_at: 1619954611616,
+          ttl: 3601
+        }]));
+        expect(response.loading).toBe(false);
+        expect(response.error).toBe(undefined);
+      });
+    });
+  });
+
+  describe('When there\'s no data', () => {
+
+    describe('GetForums', () => {
+
+      beforeAll(async () => {
+
+        const forumQuery = new GraphQLInteraction()
+          .given('there\'s no data')
+          .uponReceiving('a request to list the forums')
+          .withRequest({
+            path: '/graphql',
+            method: 'POST'
+          })
+          .withOperation('GetForums')
+          .withQuery(
+            `query GetForums {
+              forums {
+                id
+                glyph
+                label
+                position
+                __typename
+              }
+            }`
+          )
+          .withVariables({})
+          .willRespondWith({
+            status: 200,
+            headers: {
+              'Content-Type': 'application/json; charset=utf-8'
+            },
+            body: {
+              data: {
+                forums: []
+              }
+            }
+          });
+        return await internals.provider.addInteraction(forumQuery);
+      });
+
+      test('it returns the forums', async () => {
+
+        const forums = getForums();
+        const { counter, promise: resolveAfterTwo } = resolveAfter(2);
+        let response = null;
+        forums.subscribe((forumsValue) => {
+
+          response = forumsValue;
+          counter();
+        });
+        expect(response.data).toBeInstanceOf(Array);
+        expect(response.data.length).toBe(0);
+        expect(response.loading).toBe(true);
+        expect(response.error).toBe(undefined);
+        await resolveAfterTwo;
+        expect(response.data).toBeInstanceOf(Array);
+        expect(response.data.length).toBe(0);
+        expect(response.loading).toBe(false);
+        expect(response.error).toBe(undefined);
+      });
+    });
+
+    describe('GetForum', () => {
+
+      beforeAll(async () => {
+
+        const forumQuery = new GraphQLInteraction()
+          .given('there\'s no data')
+          .uponReceiving('a request to get a single forum')
+          .withRequest({
+            path: '/graphql',
+            method: 'POST'
+          })
+          .withOperation('GetForum')
+          .withQuery(
+            `query GetForum($id: ID!) {
+              forum(id: $id) {
+                id
+                glyph
+                label
+                position
+                topics {
+                  id
+                  title
+                  updated_at
+                  ttl
+                  __typename
+                }
+                __typename
+              }
+            }`
+          )
+          .withVariables({
+            id: 'freezer'
+          })
+          .willRespondWith({
+            status: 200,
+            headers: {
+              'Content-Type': 'application/json; charset=utf-8'
+            },
+            body: {
+              data: {
+                forum: null
+              }
+            }
+          });
+        return await internals.provider.addInteraction(forumQuery);
+      });
+
+      test('it returns the forum', async () => {
+
+        const forum = getForum('freezer');
+        const { counter, promise: resolveAfterTwo } = resolveAfter(2);
+        let response = null;
+        forum.subscribe((forumsValue) => {
+
+          response = forumsValue;
+          counter();
+        });
+        expect(response.data).toBe(null);
+        expect(response.loading).toBe(true);
+        expect(response.error).toBe(undefined);
+        await resolveAfterTwo;
+        expect(response.data).toBe(null);
+        expect(response.loading).toBe(false);
+        expect(response.error).toBe(undefined);
+      });
+    });
+  });
+
+  describe('When there\'s a server error', () => {
+
+    describe('GetForums', () => {
+
+      beforeAll(async () => {
+
+        const forumQuery = new GraphQLInteraction()
+          .given('there\'s a server error')
+          .uponReceiving('a request to list the forums')
+          .withRequest({
+            path: '/graphql',
+            method: 'POST'
+          })
+          .withOperation('GetForums')
+          .withQuery(
+            `query GetForums {
+              forums {
+                id
+                glyph
+                label
+                position
+                __typename
+              }
+            }`
+          )
+          .withVariables({})
+          .willRespondWith({
+            status: 500
+          });
+        return await internals.provider.addInteraction(forumQuery);
+      });
+
+      test('it returns the error', async () => {
+
+        const forums = getForums();
+        const { counter, promise: resolveAfterTwo } = resolveAfter(2);
+        let response = null;
+        forums.subscribe((forumsValue) => {
+
+          response = forumsValue;
+          counter();
+        });
+        expect(response.data).toBeInstanceOf(Array);
+        expect(response.data.length).toBe(0);
+        expect(response.loading).toBe(true);
+        expect(response.error).toBe(undefined);
+        await resolveAfterTwo;
+        expect(response.data).toBeInstanceOf(Array);
+        expect(response.data.length).toBe(0);
+        expect(response.loading).toBe(false);
+        expect(response.error).toBeInstanceOf(Error);
+      });
+    });
+
+    describe('GetForum', () => {
+
+      beforeAll(async () => {
+
+        const forumQuery = new GraphQLInteraction()
+          .given('there\'s a server error')
+          .uponReceiving('a request to get a single forum')
+          .withRequest({
+            path: '/graphql',
+            method: 'POST'
+          })
+          .withOperation('GetForum')
+          .withQuery(
+            `query GetForum($id: ID!) {
+              forum(id: $id) {
+                id
+                glyph
+                label
+                position
+                topics {
+                  id
+                  title
+                  updated_at
+                  ttl
+                  __typename
+                }
+                __typename
+              }
+            }`
+          )
+          .withVariables({
+            id: 'freezer'
+          })
+          .willRespondWith({
+            status: 500
+          });
+        return await internals.provider.addInteraction(forumQuery);
+      });
+
+      test('it returns the error', async () => {
+
+        const forum = getForum('freezer');
+        const { counter, promise: resolveAfterTwo } = resolveAfter(2);
+        let response = null;
+        forum.subscribe((forumsValue) => {
+
+          response = forumsValue;
+          counter();
+        });
+        expect(response.data).toBe(null);
+        expect(response.loading).toBe(true);
+        expect(response.error).toBe(undefined);
+        await resolveAfterTwo;
+        expect(response.data).toBe(null);
+        expect(response.loading).toBe(false);
+        expect(response.error).toBeInstanceOf(Error);
+      });
+    });
+  });
+
+  describe('When there\'s an error in the response', () => {
+
+    describe('GetForums', () => {
+
+      beforeAll(async () => {
+
+        const forumQuery = new GraphQLInteraction()
+          .given('there\'s an error in the response')
+          .uponReceiving('a request to list the forums')
+          .withRequest({
+            path: '/graphql',
+            method: 'POST'
+          })
+          .withOperation('GetForums')
+          .withQuery(
+            `query GetForums {
+              forums {
+                id
+                glyph
+                label
+                position
+                __typename
+              }
+            }`
+          )
+          .withVariables({})
+          .willRespondWith({
+            status: 200,
+            headers: {
+              'Content-Type': 'application/json; charset=utf-8'
+            },
+            body: {
+              errors: eachLike({
+                message: like('An error occurred when fetching forums')
+              })
+            }
+          });
+        return await internals.provider.addInteraction(forumQuery);
+      });
+
+      test('it returns the error', async () => {
+
+        const forums = getForums();
+        const { counter, promise: resolveAfterTwo } = resolveAfter(2);
+        let response = null;
+        forums.subscribe((forumsValue) => {
+
+          response = forumsValue;
+          counter();
+        });
+        expect(response.data).toBeInstanceOf(Array);
+        expect(response.data.length).toBe(0);
+        expect(response.loading).toBe(true);
+        expect(response.error).toBe(undefined);
+        await resolveAfterTwo;
+        expect(response.data).toBeInstanceOf(Array);
+        expect(response.data.length).toBe(0);
+        expect(response.loading).toBe(false);
+        expect(response.error.graphQLErrors).toEqual(expect.arrayContaining([{
+          message: 'An error occurred when fetching forums'
+        }]));
+      });
+    });
+
+    describe('GetForum', () => {
+
+      beforeAll(async () => {
+
+        const forumQuery = new GraphQLInteraction()
+          .given('there\'s an error in the response')
+          .uponReceiving('a request to get a single forum')
+          .withRequest({
+            path: '/graphql',
+            method: 'POST'
+          })
+          .withOperation('GetForum')
+          .withQuery(
+            `query GetForum($id: ID!) {
+              forum(id: $id) {
+                id
+                glyph
+                label
+                position
+                topics {
+                  id
+                  title
+                  updated_at
+                  ttl
+                  __typename
+                }
+                __typename
+              }
+            }`
+          )
+          .withVariables({
+            id: 'freezer'
+          })
+          .willRespondWith({
+            status: 200,
+            headers: {
+              'Content-Type': 'application/json; charset=utf-8'
+            },
+            body: {
+              errors: eachLike({
+                message: like('An error occurred when fetching the forum')
+              })
+            }
+          });
+        return await internals.provider.addInteraction(forumQuery);
+      });
+
+      test('it returns the error', async () => {
+
+        const forum = getForum('freezer');
+        const { counter, promise: resolveAfterTwo } = resolveAfter(2);
+        let response = null;
+        forum.subscribe((forumsValue) => {
+
+          response = forumsValue;
+          counter();
+        });
+        expect(response.data).toBe(null);
+        expect(response.loading).toBe(true);
+        expect(response.error).toBe(undefined);
+        await resolveAfterTwo;
+        expect(response.data).toBe(null);
+        expect(response.loading).toBe(false);
+        expect(response.error.graphQLErrors).toEqual(expect.arrayContaining([{
+          message: 'An error occurred when fetching the forum'
+        }]));
+      });
+    });
+  });
+});
diff --git a/src/lib/stores/forums.ts b/src/lib/stores/forums.ts
new file mode 100644
index 0000000..cb62b5a
--- /dev/null
+++ b/src/lib/stores/forums.ts
@@ -0,0 +1,5 @@
+import { store } from './apollo';
+import { GET_FORUM, GET_FORUMS } from '$lib/data/queries';
+
+export const getForum = (id: string) => store({ key: 'forum', query: GET_FORUM, variables: { id } });
+export const getForums = () => store({ key: 'forums', query: GET_FORUMS, initialValue: [] });
diff --git a/src/lib/stores/posts.test.ts b/src/lib/stores/posts.test.ts
new file mode 100644
index 0000000..afc22f3
--- /dev/null
+++ b/src/lib/stores/posts.test.ts
@@ -0,0 +1,339 @@
+import { GraphQLInteraction, Pact, Matchers } from '@pact-foundation/pact';
+import { resolve } from 'path';
+
+import { resolveAfter } from '$lib/utils/resolve_after';
+
+const { eachLike, like } = Matchers;
+
+jest.mock('$lib/config/config.ts');
+
+import { getPost } from './posts';
+
+const internals = {
+  provider: null
+};
+
+describe('Posts store pact', () => {
+
+  beforeAll(async () => {
+
+    internals.provider = new Pact({
+      port: 1234,
+      dir: resolve(process.cwd(), 'pacts'),
+      consumer: 'ForumClient',
+      provider: 'ForumServer',
+      pactfileWriteMode: 'update'
+    });
+
+    await internals.provider.setup();
+  });
+
+  afterEach(() => internals.provider.verify());
+  afterAll(() => internals.provider.finalize());
+
+  describe('When there\'s data', () => {
+
+    describe('GetPost', () => {
+
+      beforeAll(async () => {
+
+        const postQuery = new GraphQLInteraction()
+          .given('there\'s data')
+          .uponReceiving('a request to get a single post')
+          .withRequest({
+            path: '/graphql',
+            method: 'POST'
+          })
+          .withOperation('GetPost')
+          .withQuery(
+            `query GetPost($id: ID!) {
+              post(id: $id) {
+                id
+                text
+                created_at
+                author {
+                  id
+                  handle
+                  __typename
+                }
+                topic {
+                  id
+                  title
+                  __typename
+                }
+                __typename
+              }
+            }`
+          )
+          .withVariables({
+            id: '8f75eba5-6989-4dd3-b466-e464546ce374'
+          })
+          .willRespondWith({
+            status: 200,
+            headers: {
+              'Content-Type': 'application/json; charset=utf-8'
+            },
+            body: {
+              data: {
+                post: like({
+                  id: like('8f75eba5-6989-4dd3-b466-e464546ce374'),
+                  text: like('This is a very pacty post'),
+                  created_at: like(1619976194937),
+                  author: like({
+                    id: like('a805b3de-cac4-451c-a1e6-f078869c9db9'),
+                    handle: like('pacts_person')
+                  }),
+                  topic: like({
+                    id: like('5c283ce1-0470-4b98-86f5-1fec9a22c9ac'),
+                    title: like('The parent pacts topic')
+                  })
+                })
+              }
+            }
+          });
+        return await internals.provider.addInteraction(postQuery);
+      });
+
+      test('it returns the post', async () => {
+
+        const post = getPost('8f75eba5-6989-4dd3-b466-e464546ce374');
+        const { counter, promise: resolveAfterTwo } = resolveAfter(2);
+        let response = null;
+        post.subscribe((postValue) => {
+
+          response = postValue;
+          counter();
+        });
+        expect(response.data).toBe(null);
+        expect(response.loading).toBe(true);
+        expect(response.error).toBe(undefined);
+        await resolveAfterTwo;
+        expect(response.data).toEqual({
+          id: '8f75eba5-6989-4dd3-b466-e464546ce374',
+          text: 'This is a very pacty post',
+          created_at: 1619976194937,
+          author: {
+            id: 'a805b3de-cac4-451c-a1e6-f078869c9db9',
+            handle: 'pacts_person'
+          },
+          topic: {
+            id: '5c283ce1-0470-4b98-86f5-1fec9a22c9ac',
+            title: 'The parent pacts topic'
+          }
+        });
+        expect(response.loading).toBe(false);
+        expect(response.error).toBe(undefined);
+      });
+    });
+  });
+
+  describe('When there\'s no data', () => {
+
+    describe('GetPost', () => {
+
+      beforeAll(async () => {
+
+        const postQuery = new GraphQLInteraction()
+          .given('there\'s no data')
+          .uponReceiving('a request to get a single post')
+          .withRequest({
+            path: '/graphql',
+            method: 'POST'
+          })
+          .withOperation('GetPost')
+          .withQuery(
+            `query GetPost($id: ID!) {
+              post(id: $id) {
+                id
+                text
+                created_at
+                author {
+                  id
+                  handle
+                  __typename
+                }
+                topic {
+                  id
+                  title
+                  __typename
+                }
+                __typename
+              }
+            }`
+          )
+          .withVariables({
+            id: '8f75eba5-6989-4dd3-b466-e464546ce374'
+          })
+          .willRespondWith({
+            status: 200,
+            headers: {
+              'Content-Type': 'application/json; charset=utf-8'
+            },
+            body: {
+              data: {
+                post: null
+              }
+            }
+          });
+        return await internals.provider.addInteraction(postQuery);
+      });
+
+      test('it returns the post', async () => {
+
+        const post = getPost('8f75eba5-6989-4dd3-b466-e464546ce374');
+        const { counter, promise: resolveAfterTwo } = resolveAfter(2);
+        let response = null;
+        post.subscribe((postValue) => {
+
+          response = postValue;
+          counter();
+        });
+        expect(response.data).toBe(null);
+        expect(response.loading).toBe(true);
+        expect(response.error).toBe(undefined);
+        await resolveAfterTwo;
+        expect(response.data).toBe(null);
+        expect(response.loading).toBe(false);
+        expect(response.error).toBe(undefined);
+      });
+    });
+  });
+
+  describe('When there\'s a server error', () => {
+
+    describe('GetPost', () => {
+
+      beforeAll(async () => {
+
+        const postQuery = new GraphQLInteraction()
+          .given('there\'s a server error')
+          .uponReceiving('a request to get a single post')
+          .withRequest({
+            path: '/graphql',
+            method: 'POST'
+          })
+          .withOperation('GetPost')
+          .withQuery(
+            `query GetPost($id: ID!) {
+              post(id: $id) {
+                id
+                text
+                created_at
+                author {
+                  id
+                  handle
+                  __typename
+                }
+                topic {
+                  id
+                  title
+                  __typename
+                }
+                __typename
+              }
+            }`
+          )
+          .withVariables({
+            id: '8f75eba5-6989-4dd3-b466-e464546ce374'
+          })
+          .willRespondWith({
+            status: 500
+          });
+        return await internals.provider.addInteraction(postQuery);
+      });
+
+      test('it returns the error', async () => {
+
+        const post = getPost('8f75eba5-6989-4dd3-b466-e464546ce374');
+        const { counter, promise: resolveAfterTwo } = resolveAfter(2);
+        let response = null;
+        post.subscribe((postValue) => {
+
+          response = postValue;
+          counter();
+        });
+        expect(response.data).toBe(null);
+        expect(response.loading).toBe(true);
+        expect(response.error).toBe(undefined);
+        await resolveAfterTwo;
+        expect(response.data).toBe(null);
+        expect(response.loading).toBe(false);
+        expect(response.error).toBeInstanceOf(Error);
+      });
+    });
+  });
+
+  describe('When there\'s an error in the response', () => {
+
+    describe('GetPost', () => {
+
+      beforeAll(async () => {
+
+        const postQuery = new GraphQLInteraction()
+          .given('there\'s an error in the response')
+          .uponReceiving('a request to get a single post')
+          .withRequest({
+            path: '/graphql',
+            method: 'POST'
+          })
+          .withOperation('GetPost')
+          .withQuery(
+            `query GetPost($id: ID!) {
+              post(id: $id) {
+                id
+                text
+                created_at
+                author {
+                  id
+                  handle
+                  __typename
+                }
+                topic {
+                  id
+                  title
+                  __typename
+                }
+                __typename
+              }
+            }`
+          )
+          .withVariables({
+            id: '8f75eba5-6989-4dd3-b466-e464546ce374'
+          })
+          .willRespondWith({
+            status: 200,
+            headers: {
+              'Content-Type': 'application/json; charset=utf-8'
+            },
+            body: {
+              errors: eachLike({
+                message: like('An error occurred when fetching the post')
+              })
+            }
+          });
+        return await internals.provider.addInteraction(postQuery);
+      });
+
+      test('it returns the error', async () => {
+
+        const post = getPost('8f75eba5-6989-4dd3-b466-e464546ce374');
+        const { counter, promise: resolveAfterTwo } = resolveAfter(2);
+        let response = null;
+        post.subscribe((postValue) => {
+
+          response = postValue;
+          counter();
+        });
+        expect(response.data).toBe(null);
+        expect(response.loading).toBe(true);
+        expect(response.error).toBe(undefined);
+        await resolveAfterTwo;
+        expect(response.data).toBe(null);
+        expect(response.loading).toBe(false);
+        expect(response.error.graphQLErrors).toEqual(expect.arrayContaining([{
+          message: 'An error occurred when fetching the post'
+        }]));
+      });
+    });
+  });
+});
diff --git a/src/lib/stores/posts.ts b/src/lib/stores/posts.ts
new file mode 100644
index 0000000..0d3dec3
--- /dev/null
+++ b/src/lib/stores/posts.ts
@@ -0,0 +1,4 @@
+import { store } from './apollo';
+import { GET_POST } from '$lib/data/queries';
+
+export const getPost = (id: string) => store({ key: 'post', query: GET_POST, variables: { id } });
diff --git a/src/lib/stores/tags.test.ts b/src/lib/stores/tags.test.ts
new file mode 100644
index 0000000..9d3eb50
--- /dev/null
+++ b/src/lib/stores/tags.test.ts
@@ -0,0 +1,311 @@
+import { GraphQLInteraction, Pact, Matchers } from '@pact-foundation/pact';
+import { resolve } from 'path';
+
+import { resolveAfter } from '$lib/utils/resolve_after';
+
+const { eachLike, like } = Matchers;
+
+jest.mock('$lib/config/config.ts');
+
+import { getTag } from './tags';
+
+const internals = {
+  provider: null
+};
+
+describe('Tags store pact', () => {
+
+  beforeAll(async () => {
+
+    internals.provider = new Pact({
+      port: 1234,
+      dir: resolve(process.cwd(), 'pacts'),
+      consumer: 'ForumClient',
+      provider: 'ForumServer',
+      pactfileWriteMode: 'update'
+    });
+
+    await internals.provider.setup();
+  });
+
+  afterEach(() => internals.provider.verify());
+  afterAll(() => internals.provider.finalize());
+
+  describe('When there\'s data', () => {
+
+    describe('GetTag', () => {
+
+      beforeAll(async () => {
+
+        const tagQuery = new GraphQLInteraction()
+          .given('there\'s data')
+          .uponReceiving('a request to get a single tag')
+          .withRequest({
+            path: '/graphql',
+            method: 'POST'
+          })
+          .withOperation('GetTag')
+          .withQuery(
+            `query GetTag($id: ID!) {
+              tag(id: $id) {
+                id
+                topics {
+                  id
+                  title
+                  updated_at
+                  ttl
+                  __typename
+                }
+                __typename
+              }
+            }`
+          )
+          .withVariables({
+            id: 'pineapple'
+          })
+          .willRespondWith({
+            status: 200,
+            headers: {
+              'Content-Type': 'application/json; charset=utf-8'
+            },
+            body: {
+              data: {
+                tag: {
+                  id: like('pineapple'),
+                  topics: eachLike({
+                    id: like('cd038ae7-e8b4-4e38-9543-3d697e69ac34'),
+                    title: like('This topic is about pineapples'),
+                    updated_at: like(1619978944077),
+                    ttl: like(3555)
+                  })
+                }
+              }
+            }
+          });
+        return await internals.provider.addInteraction(tagQuery);
+      });
+
+      test('it returns the tag', async () => {
+
+        const tag = getTag('pineapple');
+        const { counter, promise: resolveAfterTwo } = resolveAfter(2);
+        let response = null;
+        tag.subscribe((tagValue) => {
+
+          response = tagValue;
+          counter();
+        });
+        expect(response.data).toBe(null);
+        expect(response.loading).toBe(true);
+        expect(response.error).toBe(undefined);
+        await resolveAfterTwo;
+        expect(response.data).toEqual({
+          id: 'pineapple',
+          topics: [{
+            id: 'cd038ae7-e8b4-4e38-9543-3d697e69ac34',
+            title: 'This topic is about pineapples',
+            updated_at: 1619978944077,
+            ttl: 3555
+          }]
+        });
+        expect(response.loading).toBe(false);
+        expect(response.error).toBe(undefined);
+      });
+    });
+  });
+
+  describe('When there\'s no data', () => {
+
+    describe('GetTag', () => {
+
+      beforeAll(async () => {
+
+        const tagQuery = new GraphQLInteraction()
+          .given('there\'s no data')
+          .uponReceiving('a request to get a single tag')
+          .withRequest({
+            path: '/graphql',
+            method: 'POST'
+          })
+          .withOperation('GetTag')
+          .withQuery(
+            `query GetTag($id: ID!) {
+              tag(id: $id) {
+                id
+                topics {
+                  id
+                  title
+                  updated_at
+                  ttl
+                  __typename
+                }
+                __typename
+              }
+            }`
+          )
+          .withVariables({
+            id: 'pineapple'
+          })
+          .willRespondWith({
+            status: 200,
+            headers: {
+              'Content-Type': 'application/json; charset=utf-8'
+            },
+            body: {
+              data: {
+                tag: null
+              }
+            }
+          });
+        return await internals.provider.addInteraction(tagQuery);
+      });
+
+      test('it returns the tag', async () => {
+
+        const tag = getTag('pineapple');
+        const { counter, promise: resolveAfterTwo } = resolveAfter(2);
+        let response = null;
+        tag.subscribe((tagValue) => {
+
+          response = tagValue;
+          counter();
+        });
+        expect(response.data).toBe(null);
+        expect(response.loading).toBe(true);
+        expect(response.error).toBe(undefined);
+        await resolveAfterTwo;
+        expect(response.data).toBe(null);
+        expect(response.loading).toBe(false);
+        expect(response.error).toBe(undefined);
+      });
+    });
+  });
+
+  describe('When there\'s a server error', () => {
+
+    describe('GetTag', () => {
+
+      beforeAll(async () => {
+
+        const tagQuery = new GraphQLInteraction()
+          .given('there\'s a server error')
+          .uponReceiving('a request to get a single tag')
+          .withRequest({
+            path: '/graphql',
+            method: 'POST'
+          })
+          .withOperation('GetTag')
+          .withQuery(
+            `query GetTag($id: ID!) {
+              tag(id: $id) {
+                id
+                topics {
+                  id
+                  title
+                  updated_at
+                  ttl
+                  __typename
+                }
+                __typename
+              }
+            }`
+          )
+          .withVariables({
+            id: 'pineapple'
+          })
+          .willRespondWith({
+            status: 500
+          });
+        return await internals.provider.addInteraction(tagQuery);
+      });
+
+      test('it returns the error', async () => {
+
+        const tag = getTag('pineapple');
+        const { counter, promise: resolveAfterTwo } = resolveAfter(2);
+        let response = null;
+        tag.subscribe((tagValue) => {
+
+          response = tagValue;
+          counter();
+        });
+        expect(response.data).toBe(null);
+        expect(response.loading).toBe(true);
+        expect(response.error).toBe(undefined);
+        await resolveAfterTwo;
+        expect(response.data).toBe(null);
+        expect(response.loading).toBe(false);
+        expect(response.error).toBeInstanceOf(Error);
+      });
+    });
+  });
+
+  describe('When there\'s an error in the response', () => {
+
+    describe('GetTag', () => {
+
+      beforeAll(async () => {
+
+        const tagQuery = new GraphQLInteraction()
+          .given('there\'s an error in the response')
+          .uponReceiving('a request to get a single tag')
+          .withRequest({
+            path: '/graphql',
+            method: 'POST'
+          })
+          .withOperation('GetTag')
+          .withQuery(
+            `query GetTag($id: ID!) {
+              tag(id: $id) {
+                id
+                topics {
+                  id
+                  title
+                  updated_at
+                  ttl
+                  __typename
+                }
+                __typename
+              }
+            }`
+          )
+          .withVariables({
+            id: 'pineapple'
+          })
+          .willRespondWith({
+            status: 200,
+            headers: {
+              'Content-Type': 'application/json; charset=utf-8'
+            },
+            body: {
+              errors: eachLike({
+                message: like('An error occurred when fetching the tag')
+              })
+            }
+          });
+        return await internals.provider.addInteraction(tagQuery);
+      });
+
+      test('it returns the error', async () => {
+
+        const tag = getTag('pineapple');
+        const { counter, promise: resolveAfterTwo } = resolveAfter(2);
+        let response = null;
+        tag.subscribe((tagValue) => {
+
+          response = tagValue;
+          counter();
+        });
+        expect(response.data).toBe(null);
+        expect(response.loading).toBe(true);
+        expect(response.error).toBe(undefined);
+        await resolveAfterTwo;
+        expect(response.data).toBe(null);
+        expect(response.loading).toBe(false);
+        expect(response.error.graphQLErrors).toEqual(expect.arrayContaining([{
+          message: 'An error occurred when fetching the tag'
+        }]));
+      });
+    });
+  });
+});
diff --git a/src/lib/stores/tags.ts b/src/lib/stores/tags.ts
new file mode 100644
index 0000000..79f017e
--- /dev/null
+++ b/src/lib/stores/tags.ts
@@ -0,0 +1,4 @@
+import { store } from './apollo';
+import { GET_TAG } from '$lib/data/queries';
+
+export const getTag = (id: string) => store({ key: 'tag', query: GET_TAG, variables: { id } });
diff --git a/src/lib/stores/topics.test.ts b/src/lib/stores/topics.test.ts
new file mode 100644
index 0000000..2d2a2e7
--- /dev/null
+++ b/src/lib/stores/topics.test.ts
@@ -0,0 +1,413 @@
+import { GraphQLInteraction, Pact, Matchers } from '@pact-foundation/pact';
+import { resolve } from 'path';
+
+import { resolveAfter } from '$lib/utils/resolve_after';
+
+const { eachLike, like } = Matchers;
+
+jest.mock('$lib/config/config.ts');
+
+import { getTopic } from './topics';
+
+const internals = {
+  provider: null
+};
+
+describe('Topics store pact', () => {
+
+  beforeAll(async () => {
+
+    internals.provider = new Pact({
+      port: 1234,
+      dir: resolve(process.cwd(), 'pacts'),
+      consumer: 'ForumClient',
+      provider: 'ForumServer',
+      pactfileWriteMode: 'update'
+    });
+
+    await internals.provider.setup();
+  });
+
+  afterEach(() => internals.provider.verify());
+  afterAll(() => internals.provider.finalize());
+
+  describe('When there\'s data', () => {
+
+    describe('GetTopic', () => {
+
+      beforeAll(async () => {
+
+        const topicQuery = new GraphQLInteraction()
+          .given('there\'s data')
+          .uponReceiving('a request to get a single topic')
+          .withRequest({
+            path: '/graphql',
+            method: 'POST'
+          })
+          .withOperation('GetTopic')
+          .withQuery(
+            `query GetTopic($id: ID!) {
+              topic(id: $id) {
+                id
+                title
+                updated_at
+                ttl
+                forum {
+                  id
+                  glyph
+                  label
+                  __typename
+                }
+                tags {
+                  id
+                  weight
+                  __typename
+                }
+                posts {
+                  id
+                  text
+                  created_at
+                  author {
+                    id
+                    handle
+                    __typename
+                  }
+                  __typename
+                }
+                __typename
+              }
+            }`
+          )
+          .withVariables({
+            id: '0b58959d-d448-4a4e-84b6-35e5ac0028d1'
+          })
+          .willRespondWith({
+            status: 200,
+            headers: {
+              'Content-Type': 'application/json; charset=utf-8'
+            },
+            body: {
+              data: {
+                topic: {
+                  id: like('0b58959d-d448-4a4e-84b6-35e5ac0028d1'),
+                  title: like('The pacty topic of the day'),
+                  updated_at: like(1619979888906),
+                  ttl: like(3399),
+                  forum: {
+                    id: like('cucumber'),
+                    glyph: like('✽'),
+                    label: like('test_forums.cucumber')
+                  },
+                  tags: eachLike({
+                    id: like('skunk'),
+                    weight: like(44)
+                  }),
+                  posts: eachLike({
+                    id: like('ed93530e-6f9c-4701-91ef-14f9e0ed3e26'),
+                    text: like('The content of this post is very relevant'),
+                    created_at: like(1619979889798),
+                    author: like({
+                      id: like('07fb2ba0-0945-464a-b215-873296710c8c'),
+                      handle: like('cucumber_fan92')
+                    })
+                  })
+                }
+              }
+            }
+          });
+        return await internals.provider.addInteraction(topicQuery);
+      });
+
+      test('it returns the topic', async () => {
+
+        const topic = getTopic('0b58959d-d448-4a4e-84b6-35e5ac0028d1');
+        const { counter, promise: resolveAfterTwo } = resolveAfter(2);
+        let response = null;
+        topic.subscribe((topicValue) => {
+
+          response = topicValue;
+          counter();
+        });
+        expect(response.data).toBe(null);
+        expect(response.loading).toBe(true);
+        expect(response.error).toBe(undefined);
+        await resolveAfterTwo;
+        expect(response.data).toEqual({
+          id: '0b58959d-d448-4a4e-84b6-35e5ac0028d1',
+          title: 'The pacty topic of the day',
+          updated_at: 1619979888906,
+          ttl: 3399,
+          forum: {
+            id: 'cucumber',
+            glyph: '✽',
+            label: 'test_forums.cucumber'
+          },
+          tags: [{
+            id: 'skunk',
+            weight: 44
+          }],
+          posts: [{
+            id: 'ed93530e-6f9c-4701-91ef-14f9e0ed3e26',
+            text: 'The content of this post is very relevant',
+            created_at: 1619979889798,
+            author: {
+              id: '07fb2ba0-0945-464a-b215-873296710c8c',
+              handle: 'cucumber_fan92'
+            }
+          }]
+        });
+        expect(response.loading).toBe(false);
+        expect(response.error).toBe(undefined);
+      });
+    });
+  });
+
+  describe('When there\'s no data', () => {
+
+    describe('GetTopic', () => {
+
+      beforeAll(async () => {
+
+        const topicQuery = new GraphQLInteraction()
+          .given('there\'s no data')
+          .uponReceiving('a request to get a single topic')
+          .withRequest({
+            path: '/graphql',
+            method: 'POST'
+          })
+          .withOperation('GetTopic')
+          .withQuery(
+            `query GetTopic($id: ID!) {
+              topic(id: $id) {
+                id
+                title
+                updated_at
+                ttl
+                forum {
+                  id
+                  glyph
+                  label
+                  __typename
+                }
+                tags {
+                  id
+                  weight
+                  __typename
+                }
+                posts {
+                  id
+                  text
+                  created_at
+                  author {
+                    id
+                    handle
+                    __typename
+                  }
+                  __typename
+                }
+                __typename
+              }
+            }`
+          )
+          .withVariables({
+            id: '0b58959d-d448-4a4e-84b6-35e5ac0028d1'
+          })
+          .willRespondWith({
+            status: 200,
+            headers: {
+              'Content-Type': 'application/json; charset=utf-8'
+            },
+            body: {
+              data: {
+                topic: null
+              }
+            }
+          });
+        return await internals.provider.addInteraction(topicQuery);
+      });
+
+      test('it returns the topic', async () => {
+
+        const topic = getTopic('0b58959d-d448-4a4e-84b6-35e5ac0028d1');
+        const { counter, promise: resolveAfterTwo } = resolveAfter(2);
+        let response = null;
+        topic.subscribe((topicValue) => {
+
+          response = topicValue;
+          counter();
+        });
+        expect(response.data).toBe(null);
+        expect(response.loading).toBe(true);
+        expect(response.error).toBe(undefined);
+        await resolveAfterTwo;
+        expect(response.data).toBe(null);
+        expect(response.loading).toBe(false);
+        expect(response.error).toBe(undefined);
+      });
+    });
+  });
+
+  describe('When there\'s a server error', () => {
+
+    describe('GetTopic', () => {
+
+      beforeAll(async () => {
+
+        const topicQuery = new GraphQLInteraction()
+          .given('there\'s a server error')
+          .uponReceiving('a request to get a single topic')
+          .withRequest({
+            path: '/graphql',
+            method: 'POST'
+          })
+          .withOperation('GetTopic')
+          .withQuery(
+            `query GetTopic($id: ID!) {
+              topic(id: $id) {
+                id
+                title
+                updated_at
+                ttl
+                forum {
+                  id
+                  glyph
+                  label
+                  __typename
+                }
+                tags {
+                  id
+                  weight
+                  __typename
+                }
+                posts {
+                  id
+                  text
+                  created_at
+                  author {
+                    id
+                    handle
+                    __typename
+                  }
+                  __typename
+                }
+                __typename
+              }
+            }`
+          )
+          .withVariables({
+            id: '0b58959d-d448-4a4e-84b6-35e5ac0028d1'
+          })
+          .willRespondWith({
+            status: 500
+          });
+        return await internals.provider.addInteraction(topicQuery);
+      });
+
+      test('it returns the error', async () => {
+
+        const topic = getTopic('0b58959d-d448-4a4e-84b6-35e5ac0028d1');
+        const { counter, promise: resolveAfterTwo } = resolveAfter(2);
+        let response = null;
+        topic.subscribe((topicValue) => {
+
+          response = topicValue;
+          counter();
+        });
+        expect(response.data).toBe(null);
+        expect(response.loading).toBe(true);
+        expect(response.error).toBe(undefined);
+        await resolveAfterTwo;
+        expect(response.data).toBe(null);
+        expect(response.loading).toBe(false);
+        expect(response.error).toBeInstanceOf(Error);
+      });
+    });
+  });
+
+  describe('When there\'s an error in the response', () => {
+
+    describe('GetTopic', () => {
+
+      beforeAll(async () => {
+
+        const topicQuery = new GraphQLInteraction()
+          .given('there\'s an error in the response')
+          .uponReceiving('a request to get a single topic')
+          .withRequest({
+            path: '/graphql',
+            method: 'POST'
+          })
+          .withOperation('GetTopic')
+          .withQuery(
+            `query GetTopic($id: ID!) {
+              topic(id: $id) {
+                id
+                title
+                updated_at
+                ttl
+                forum {
+                  id
+                  glyph
+                  label
+                  __typename
+                }
+                tags {
+                  id
+                  weight
+                  __typename
+                }
+                posts {
+                  id
+                  text
+                  created_at
+                  author {
+                    id
+                    handle
+                    __typename
+                  }
+                  __typename
+                }
+                __typename
+              }
+            }`
+          )
+          .withVariables({
+            id: '0b58959d-d448-4a4e-84b6-35e5ac0028d1'
+          })
+          .willRespondWith({
+            status: 200,
+            headers: {
+              'Content-Type': 'application/json; charset=utf-8'
+            },
+            body: {
+              errors: eachLike({
+                message: like('An error occurred when fetching the topic')
+              })
+            }
+          });
+        return await internals.provider.addInteraction(topicQuery);
+      });
+
+      test('it returns the error', async () => {
+
+        const topic = getTopic('0b58959d-d448-4a4e-84b6-35e5ac0028d1');
+        const { counter, promise: resolveAfterTwo } = resolveAfter(2);
+        let response = null;
+        topic.subscribe((topicValue) => {
+
+          response = topicValue;
+          counter();
+        });
+        expect(response.data).toBe(null);
+        expect(response.loading).toBe(true);
+        expect(response.error).toBe(undefined);
+        await resolveAfterTwo;
+        expect(response.data).toBe(null);
+        expect(response.loading).toBe(false);
+        expect(response.error.graphQLErrors).toEqual(expect.arrayContaining([{
+          message: 'An error occurred when fetching the topic'
+        }]));
+      });
+    });
+  });
+});
diff --git a/src/lib/stores/topics.ts b/src/lib/stores/topics.ts
new file mode 100644
index 0000000..84228cd
--- /dev/null
+++ b/src/lib/stores/topics.ts
@@ -0,0 +1,4 @@
+import { store } from './apollo';
+import { GET_TOPIC } from '$lib/data/queries';
+
+export const getTopic = (id: string) => store({ key: 'topic', query: GET_TOPIC, variables: { id } });