refactor(hooks): replace useGithubApi with useGithubRepoMeta

* use GraphQL API instead of REST (the inconvenient however is that we
now need an authorization token...)
* move fetcher in services
* add tests
* mock response using MSW

36 files changed, 400 insertions, 114 deletions

diff --git a/.cspell/project-words.txt b/.cspell/project-words.txt
index 869310d..12398c3 100644
--- a/.cspell/project-words.txt
+++ b/.cspell/project-words.txt
@@ -16,6 +16,7 @@ hexcode
 Jamstack
 LINKEDIN
 maxage
+mkcert
 nextjs
 nosniff
 postbuild
diff --git a/.env.example b/.env.example
index dbfb664..12ac09a 100644
--- a/.env.example
+++ b/.env.example
@@ -33,6 +33,7 @@ APP_FEED_DESCRIPTION="What you want..."
 NEXT_PUBLIC_ACKEE_DOMAIN="www.ackeeDomain.com"
 NEXT_PUBLIC_ACKEE_FILENAME="tracker.js"
 NEXT_PUBLIC_ACKEE_SITE_ID="your-id-string"
+NEXT_PUBLIC_GITHUB_TOKEN="your-token"
 
 # Use this only in development mode. It prevents "unable to verify the first
 # certificate" error when using a local domain with mkcert certificate for
diff --git a/src/pages/projets/[slug].tsx b/src/pages/projets/[slug].tsx
index b4bc906..cac6037 100644
--- a/src/pages/projets/[slug].tsx
+++ b/src/pages/projets/[slug].tsx
@@ -26,7 +26,7 @@ import { mdxComponents } from '../../components/mdx';
 import styles from '../../styles/pages/project.module.scss';
 import type { NextPageWithLayout, Project, Repos } from '../../types';
 import { CONFIG } from '../../utils/config';
-import { ROUTES } from '../../utils/constants';
+import { GITHUB_PSEUDO, ROUTES } from '../../utils/constants';
 import {
   getSchemaJson,
   getSinglePageSchema,
@@ -40,7 +40,7 @@ import {
 } from '../../utils/helpers/server';
 import {
   useBreadcrumb,
-  useGithubApi,
+  useGithubRepoMeta,
   useHeadingsTree,
 } from '../../utils/hooks';
 
@@ -115,31 +115,30 @@ const ProjectPage: NextPageWithLayout<ProjectPageProps> = ({ project }) => {
     id: 'RwI3B9',
   });
 
-  const { isError, isLoading, data } = useGithubApi(
-    /*
-     * Repo should be defined for each project so for now it is safe for my
-     * use-case. However, I should refactored it to handle cases where it is
-     * not defined. The logic should be extracted in another component I think.
-     *
-     * TODO: fix this hardly readable argument
-     */
-    meta.repos ? meta.repos.github ?? '' : ''
-  );
+  const {
+    isError,
+    isLoading,
+    meta: githubMeta,
+  } = useGithubRepoMeta({
+    name: repos.github?.substring(repos.github.lastIndexOf('/') + 1) ?? '',
+    owner: GITHUB_PSEUDO,
+  });
 
   if (isError) return 'Error';
-  if (isLoading || !data) return <Spinner aria-label={loadingRepoPopularity} />;
+  if (isLoading || !githubMeta)
+    return <Spinner aria-label={loadingRepoPopularity} />;
 
   const overviewMeta: Partial<ProjectMeta> = {
-    creationDate: data.created_at,
-    lastUpdateDate: data.updated_at,
+    creationDate: githubMeta.createdAt,
+    lastUpdateDate: githubMeta.updatedAt,
     license,
-    popularity: repos?.github
+    popularity: repos.github
       ? {
-          count: data.stargazers_count,
+          count: githubMeta.stargazerCount,
           url: `https://github.com/${repos.github}/stargazers`,
         }
       : undefined,
-    repositories: repos ? getRepos(repos) : undefined,
+    repositories: getRepos(repos),
     technologies,
   };
 
diff --git a/src/services/github/fetch-github-repo-meta.test.ts b/src/services/github/fetch-github-repo-meta.test.ts
new file mode 100644
index 0000000..324db9a
--- /dev/null
+++ b/src/services/github/fetch-github-repo-meta.test.ts
@@ -0,0 +1,47 @@
+import { afterEach, describe, expect, it } from '@jest/globals';
+import { githubRepos } from '../../../tests/fixtures';
+import { fetchGithubRepoMeta } from './fetch-github-repo-meta';
+
+describe('fetch-github-repo-meta', () => {
+  afterEach(() => {
+    window.history.replaceState({}, '', '/');
+  });
+
+  it('returns the Github repository meta using GraphQL', async () => {
+    const result = await fetchGithubRepoMeta({
+      name: githubRepos[0].name,
+      owner: githubRepos[0].owner,
+    });
+
+    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+    expect.assertions(3);
+
+    expect(result.createdAt).toBe(githubRepos[0].createdAt);
+    expect(result.stargazerCount).toBe(githubRepos[0].stargazerCount);
+    expect(result.updatedAt).toBe(githubRepos[0].updatedAt);
+  });
+
+  it('rejects with an error when repository is not found', async () => {
+    const name = 'inexistent-repo';
+    const owner = 'inexistent-owner';
+
+    window.history.replaceState({}, '', '/?error=true');
+    expect.assertions(1);
+
+    await expect(async () =>
+      fetchGithubRepoMeta({ name, owner })
+    ).rejects.toEqual(
+      new Error(`No data found for the following repository ${owner}/${name}.`)
+    );
+  });
+
+  it('throws an error if the Github token is not defined', async () => {
+    process.env.NEXT_PUBLIC_GITHUB_TOKEN = '';
+
+    expect.assertions(1);
+
+    await expect(async () =>
+      fetchGithubRepoMeta({ name: 'any-name', owner: 'any-owner' })
+    ).rejects.toThrowError(new Error('Github token is not defined.'));
+  });
+});
diff --git a/src/services/github/fetch-github-repo-meta.ts b/src/services/github/fetch-github-repo-meta.ts
new file mode 100644
index 0000000..14c8516
--- /dev/null
+++ b/src/services/github/fetch-github-repo-meta.ts
@@ -0,0 +1,45 @@
+import type { GithubRepositoryMeta, Nullable } from '../../types';
+import { GITHUB_API } from '../../utils/constants';
+import { fetchGraphQL } from '../../utils/helpers';
+
+export type GithubRepositoryResponse = {
+  repository: Nullable<GithubRepositoryMeta>;
+};
+
+const githubRepoQuery = `query GithubRepository($name: String!, $owner: String!) {
+  repository(name: $name, owner: $owner) {
+    createdAt
+    stargazerCount
+    updatedAt
+  }
+}`;
+
+export type FetchGithubRepoMetaInput = {
+  name: string;
+  owner: string;
+};
+
+export const fetchGithubRepoMeta = async ({
+  name,
+  owner,
+}: FetchGithubRepoMetaInput) => {
+  const token = process.env.NEXT_PUBLIC_GITHUB_TOKEN;
+
+  if (!token) throw new Error('Github token is not defined.');
+
+  const response = await fetchGraphQL<GithubRepositoryResponse>({
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+    query: githubRepoQuery,
+    url: GITHUB_API,
+    variables: { name, owner },
+  });
+
+  if (!response.repository)
+    return Promise.reject(
+      new Error(`No data found for the following repository ${owner}/${name}.`)
+    );
+
+  return response.repository;
+};
diff --git a/src/services/github/index.ts b/src/services/github/index.ts
new file mode 100644
index 0000000..44b0cbf
--- /dev/null
+++ b/src/services/github/index.ts
@@ -0,0 +1 @@
+export * from './fetch-github-repo-meta';
diff --git a/src/types/data.ts b/src/types/data.ts
index 1d0746d..f58d6e7 100644
--- a/src/types/data.ts
+++ b/src/types/data.ts
@@ -254,7 +254,7 @@ export type Repos = {
 export type ProjectMeta = Omit<PageMeta, 'wordsCount'> & {
   contexts?: string[];
   license?: string;
-  repos?: Repos;
+  repos: Repos;
   tagline?: string;
   technologies?: string[];
 };
@@ -288,3 +288,9 @@ export type Topic = Page & {
   id: number;
   meta: TopicMeta;
 };
+
+export type GithubRepositoryMeta = {
+  createdAt: string;
+  stargazerCount: number;
+  updatedAt: string;
+};
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index 043a530..f9d6216 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -1,3 +1,7 @@
+export const GITHUB_API = 'https://api.github.com/graphql';
+
+export const GITHUB_PSEUDO = 'ArmandPhilippot';
+
 export const PERSONAL_LINKS = {
   GITHUB: 'https://github.com/ArmandPhilippot',
   GITLAB: 'https://gitlab.com/ArmandPhilippot',
diff --git a/src/utils/helpers/graphql.ts b/src/utils/helpers/graphql.ts
index e07b151..2d78e00 100644
--- a/src/utils/helpers/graphql.ts
+++ b/src/utils/helpers/graphql.ts
@@ -20,6 +20,7 @@ type GraphQLResponse<T extends GraphQLData<unknown>> = {
 };
 
 export type FetchGraphQLConfig = {
+  headers?: HeadersInit;
   query: string;
   url: string;
   variables?: Record<string, unknown>;
@@ -35,6 +36,7 @@ export type FetchGraphQLConfig = {
 export const fetchGraphQL = async <
   T extends GraphQLData<unknown> = GraphQLData<unknown>,
 >({
+  headers,
   query,
   url,
   variables,
@@ -42,6 +44,7 @@ export const fetchGraphQL = async <
   const response = await fetch(url, {
     method: 'POST',
     headers: {
+      ...headers,
       'content-type': 'application/json;charset=UTF-8',
     },
     body: JSON.stringify({
diff --git a/src/utils/hooks/index.ts b/src/utils/hooks/index.ts
index 1ee513d..f4d1583 100644
--- a/src/utils/hooks/index.ts
+++ b/src/utils/hooks/index.ts
@@ -5,7 +5,7 @@ export * from './use-boolean';
 export * from './use-breadcrumb';
 export * from './use-comments';
 export * from './use-form';
-export * from './use-github-api';
+export * from './use-github-repo-meta';
 export * from './use-headings-tree';
 export * from './use-local-storage';
 export * from './use-match-media';
diff --git a/src/utils/hooks/use-github-api.tsx b/src/utils/hooks/use-github-api.tsx
deleted file mode 100644
index aa9e3f7..0000000
--- a/src/utils/hooks/use-github-api.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import useSWR, { Fetcher } from 'swr';
-import { SWRResult } from '../../types';
-
-export type RepoData = {
-  created_at: string;
-  updated_at: string;
-  stargazers_count: number;
-};
-
-const fetcher: Fetcher<RepoData, string> = (...args) =>
-  fetch(...args).then((res) => res.json());
-
-/**
- * Retrieve data from Github API.
- *
- * @param repo - The Github repo (`owner/repo-name`).
- * @returns The repository data.
- */
-export const useGithubApi = (repo: string): SWRResult<RepoData> => {
-  const apiUrl = repo ? `https://api.github.com/repos/${repo}` : null;
-  const { data, error } = useSWR<RepoData>(apiUrl, fetcher);
-
-  return {
-    data,
-    isLoading: !error && !data,
-    isError: error,
-  };
-};
diff --git a/src/utils/hooks/use-github-repo-meta/index.ts b/src/utils/hooks/use-github-repo-meta/index.ts
new file mode 100644
index 0000000..352adc9
--- /dev/null
+++ b/src/utils/hooks/use-github-repo-meta/index.ts
@@ -0,0 +1 @@
+export * from './use-github-repo-meta';
diff --git a/src/utils/hooks/use-github-repo-meta/use-github-repo-meta.test.ts b/src/utils/hooks/use-github-repo-meta/use-github-repo-meta.test.ts
new file mode 100644
index 0000000..d796f69
--- /dev/null
+++ b/src/utils/hooks/use-github-repo-meta/use-github-repo-meta.test.ts
@@ -0,0 +1,59 @@
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  jest,
+} from '@jest/globals';
+import { renderHook, waitFor } from '@testing-library/react';
+import { githubRepos } from '../../../../tests/fixtures';
+import { useGithubRepoMeta } from './use-github-repo-meta';
+
+describe('useGithubRepoMeta', () => {
+  beforeEach(() => {
+    /* Not sure why it is needed, but without it Jest was complaining with
+     * `Jest worker encountered 4 child process exceptions`... Maybe because of
+     * useSWR? */
+    jest.useFakeTimers({
+      doNotFake: ['queueMicrotask'],
+    });
+  });
+
+  afterEach(() => {
+    jest.runOnlyPendingTimers();
+    jest.useRealTimers();
+  });
+
+  /* eslint-disable max-statements */
+  it('fetches the requested repository', async () => {
+    const { result } = renderHook(() =>
+      useGithubRepoMeta({
+        name: githubRepos[0].name,
+        owner: githubRepos[0].owner,
+      })
+    );
+
+    // Inaccurate assertions count because of waitFor...
+    //expect.assertions(11);
+    expect.hasAssertions();
+
+    expect(result.current.meta).toBeUndefined();
+    expect(result.current.isError).toBe(false);
+    expect(result.current.isLoading).toBe(true);
+    expect(result.current.isValidating).toBe(true);
+
+    jest.advanceTimersToNextTimer();
+
+    await waitFor(() => expect(result.current.meta).toBeDefined());
+    expect(result.current.meta?.createdAt).toBe(githubRepos[0].createdAt);
+    expect(result.current.meta?.stargazerCount).toBe(
+      githubRepos[0].stargazerCount
+    );
+    expect(result.current.meta?.updatedAt).toBe(githubRepos[0].updatedAt);
+    expect(result.current.isError).toBe(false);
+    expect(result.current.isLoading).toBe(false);
+    expect(result.current.isValidating).toBe(false);
+  });
+  /* eslint-enable max-statements */
+});
diff --git a/src/utils/hooks/use-github-repo-meta/use-github-repo-meta.ts b/src/utils/hooks/use-github-repo-meta/use-github-repo-meta.ts
new file mode 100644
index 0000000..888682e
--- /dev/null
+++ b/src/utils/hooks/use-github-repo-meta/use-github-repo-meta.ts
@@ -0,0 +1,37 @@
+import useSWR from 'swr';
+import {
+  type FetchGithubRepoMetaInput,
+  fetchGithubRepoMeta,
+} from '../../../services/github';
+import type { GithubRepositoryMeta, Maybe } from '../../../types';
+
+export type UseGithubRepoMetaReturn<T extends Maybe<GithubRepositoryMeta>> = {
+  isError: boolean;
+  isLoading: boolean;
+  isValidating: boolean;
+  meta: T extends undefined
+    ? Maybe<GithubRepositoryMeta>
+    : GithubRepositoryMeta;
+};
+
+export const useGithubRepoMeta = <T extends Maybe<GithubRepositoryMeta>>(
+  input: FetchGithubRepoMetaInput,
+  fallback?: T
+) => {
+  const { data, error, isLoading, isValidating } = useSWR(
+    input,
+    fetchGithubRepoMeta,
+    {
+      fallbackData: fallback,
+    }
+  );
+
+  if (error) console.error(error);
+
+  return {
+    isError: !!error,
+    isLoading,
+    isValidating,
+    meta: data,
+  } as UseGithubRepoMetaReturn<T>;
+};
diff --git a/tests/fixtures/github-repos.fixture.ts b/tests/fixtures/github-repos.fixture.ts
new file mode 100644
index 0000000..5eaa1ce
--- /dev/null
+++ b/tests/fixtures/github-repos.fixture.ts
@@ -0,0 +1,30 @@
+import type { GithubRepositoryMeta } from '../../src/types';
+
+type GithubRepository = GithubRepositoryMeta & {
+  name: string;
+  owner: string;
+};
+
+export const githubRepos = [
+  {
+    createdAt: '2020-09-26',
+    name: 'laborum',
+    owner: 'Dion',
+    stargazerCount: 8,
+    updatedAt: '2023-05-05',
+  },
+  {
+    createdAt: '2020-10-30',
+    name: 'quo',
+    owner: 'Brennan',
+    stargazerCount: 0,
+    updatedAt: '2022-03-01',
+  },
+  {
+    createdAt: '2021-11-16',
+    name: 'soluta',
+    owner: 'Alex',
+    stargazerCount: 8,
+    updatedAt: '2023-08-10',
+  },
+] satisfies GithubRepository[];
diff --git a/tests/fixtures/index.ts b/tests/fixtures/index.ts
index 2ae0185..249b608 100644
--- a/tests/fixtures/index.ts
+++ b/tests/fixtures/index.ts
@@ -1,3 +1,4 @@
+export * from './github-repos.fixture';
 export * from './wp-comments.fixture';
 export * from './wp-posts.fixture';
 export * from './wp-thematics.fixture';
diff --git a/tests/msw/handlers/comments/comments-list.handler.ts b/tests/msw/handlers/comments/comments-list.handler.ts
index e815a0e..ad760fc 100644
--- a/tests/msw/handlers/comments/comments-list.handler.ts
+++ b/tests/msw/handlers/comments/comments-list.handler.ts
@@ -1,13 +1,14 @@
-import { type ExecutionResult, graphql as executeGraphql } from 'graphql';
-import { HttpResponse, graphql } from 'msw';
+import { type ExecutionResult, graphql } from 'graphql';
+import { HttpResponse } from 'msw';
 import type {
   FetchCommentsListInput,
   CommentsListResponse,
 } from '../../../../src/services/graphql';
 import { wpCommentsFixture } from '../../../fixtures';
+import { wordpressAPI } from '../../instances';
 import { schema } from '../../schema';
 
-export const commentsListHandler = graphql.query<
+export const commentsListHandler = wordpressAPI.query<
   CommentsListResponse,
   FetchCommentsListInput
 >('CommentsList', async ({ query, variables }) => {
@@ -16,7 +17,7 @@ export const commentsListHandler = graphql.query<
 
   if (isError) return HttpResponse.json({ data: { comments: null } });
 
-  const { data, errors } = (await executeGraphql({
+  const { data, errors } = (await graphql({
     schema,
     source: query,
     variableValues: variables,
diff --git a/tests/msw/handlers/index.ts b/tests/msw/handlers/index.ts
index 85a2300..bfdeb95 100644
--- a/tests/msw/handlers/index.ts
+++ b/tests/msw/handlers/index.ts
@@ -1,11 +1,13 @@
 import { commentsHandlers } from './comments';
 import { postsHandlers } from './posts';
+import { repositoriesHandlers } from './repositories';
 import { thematicsHandlers } from './thematics';
 import { topicsHandlers } from './topics';
 
 export const handlers = [
   ...commentsHandlers,
   ...postsHandlers,
+  ...repositoriesHandlers,
   ...thematicsHandlers,
   ...topicsHandlers,
 ];
diff --git a/tests/msw/handlers/posts/last-post-cursor.handler.ts b/tests/msw/handlers/posts/last-post-cursor.handler.ts
index 2f4b648..f5c58dc 100644
--- a/tests/msw/handlers/posts/last-post-cursor.handler.ts
+++ b/tests/msw/handlers/posts/last-post-cursor.handler.ts
@@ -1,11 +1,12 @@
-import { type ExecutionResult, graphql as executeGraphql } from 'graphql';
-import { HttpResponse, graphql } from 'msw';
+import { type ExecutionResult, graphql } from 'graphql';
+import { HttpResponse } from 'msw';
 import type { LastPostCursorResponse } from '../../../../src/services/graphql';
 import { wpPostsFixture } from '../../../fixtures';
 import { getConnection } from '../../../utils/graphql';
+import { wordpressAPI } from '../../instances';
 import { schema } from '../../schema';
 
-export const lastPostCursorHandler = graphql.query<
+export const lastPostCursorHandler = wordpressAPI.query<
   LastPostCursorResponse,
   Record<'first', number>
 >('LastPostCursor', async ({ query, variables }) => {
@@ -14,7 +15,7 @@ export const lastPostCursorHandler = graphql.query<
 
   if (isError) return HttpResponse.json({ data: { posts: null } });
 
-  const { data, errors } = (await executeGraphql({
+  const { data, errors } = (await graphql({
     schema,
     source: query,
     variableValues: variables,
diff --git a/tests/msw/handlers/posts/post.handler.ts b/tests/msw/handlers/posts/post.handler.ts
index 4abdfed..72f7b95 100644
--- a/tests/msw/handlers/posts/post.handler.ts
+++ b/tests/msw/handlers/posts/post.handler.ts
@@ -1,21 +1,22 @@
-import { type ExecutionResult, graphql as executeGraphql } from 'graphql';
-import { HttpResponse, graphql } from 'msw';
+import { type ExecutionResult, graphql } from 'graphql';
+import { HttpResponse } from 'msw';
 import type { PostResponse } from '../../../../src/services/graphql';
 import { wpPostsFixture } from '../../../fixtures';
+import { wordpressAPI } from '../../instances';
 import { schema } from '../../schema';
 
-export const postHandler = graphql.query<PostResponse, Record<'slug', string>>(
-  'Post',
-  async ({ query, variables }) => {
-    const { data, errors } = (await executeGraphql({
-      schema,
-      source: query,
-      variableValues: variables,
-      rootValue: {
-        post: wpPostsFixture.find((wpPost) => wpPost.slug === variables.slug),
-      },
-    })) as ExecutionResult<PostResponse>;
+export const postHandler = wordpressAPI.query<
+  PostResponse,
+  Record<'slug', string>
+>('Post', async ({ query, variables }) => {
+  const { data, errors } = (await graphql({
+    schema,
+    source: query,
+    variableValues: variables,
+    rootValue: {
+      post: wpPostsFixture.find((wpPost) => wpPost.slug === variables.slug),
+    },
+  })) as ExecutionResult<PostResponse>;
 
-    return HttpResponse.json({ data, errors });
-  }
-);
+  return HttpResponse.json({ data, errors });
+});
diff --git a/tests/msw/handlers/posts/posts-count.handler.ts b/tests/msw/handlers/posts/posts-count.handler.ts
index 95fa105..a4425a5 100644
--- a/tests/msw/handlers/posts/posts-count.handler.ts
+++ b/tests/msw/handlers/posts/posts-count.handler.ts
@@ -1,12 +1,13 @@
-import { type ExecutionResult, graphql as executeGraphql } from 'graphql';
-import { HttpResponse, graphql } from 'msw';
+import { type ExecutionResult, graphql } from 'graphql';
+import { HttpResponse } from 'msw';
 import type { PostsCountResponse } from '../../../../src/services/graphql';
 import type { GraphQLPostWhere } from '../../../../src/types';
 import { wpPostsFixture } from '../../../fixtures';
 import { getConnection } from '../../../utils/graphql';
+import { wordpressAPI } from '../../instances';
 import { schema } from '../../schema';
 
-export const postsCountHandler = graphql.query<
+export const postsCountHandler = wordpressAPI.query<
   PostsCountResponse,
   GraphQLPostWhere
 >('PostsCount', async ({ query, variables }) => {
@@ -15,7 +16,7 @@ export const postsCountHandler = graphql.query<
 
   if (isError) return HttpResponse.json({ data: { posts: null } });
 
-  const { data, errors } = (await executeGraphql({
+  const { data, errors } = (await graphql({
     schema,
     source: query,
     variableValues: variables,
diff --git a/tests/msw/handlers/posts/posts-list.handler.ts b/tests/msw/handlers/posts/posts-list.handler.ts
index 7f8daf6..e4992d1 100644
--- a/tests/msw/handlers/posts/posts-list.handler.ts
+++ b/tests/msw/handlers/posts/posts-list.handler.ts
@@ -1,14 +1,15 @@
-import { type ExecutionResult, graphql as executeGraphql } from 'graphql';
-import { HttpResponse, graphql } from 'msw';
+import { type ExecutionResult, graphql } from 'graphql';
+import { HttpResponse } from 'msw';
 import type {
   FetchPostsListInput,
   PostsListResponse,
 } from '../../../../src/services/graphql';
 import { wpPostsFixture } from '../../../fixtures';
 import { getConnection } from '../../../utils/graphql';
+import { wordpressAPI } from '../../instances';
 import { schema } from '../../schema';
 
-export const postsListHandler = graphql.query<
+export const postsListHandler = wordpressAPI.query<
   PostsListResponse,
   FetchPostsListInput
 >('PostsList', async ({ query, variables }) => {
@@ -17,7 +18,7 @@ export const postsListHandler = graphql.query<
 
   if (isError) return HttpResponse.json({ data: { posts: null } });
 
-  const { data, errors } = (await executeGraphql({
+  const { data, errors } = (await graphql({
     schema,
     source: query,
     variableValues: variables,
diff --git a/tests/msw/handlers/posts/posts-slugs.handler.ts b/tests/msw/handlers/posts/posts-slugs.handler.ts
index 9aadddb..69e300a 100644
--- a/tests/msw/handlers/posts/posts-slugs.handler.ts
+++ b/tests/msw/handlers/posts/posts-slugs.handler.ts
@@ -1,10 +1,11 @@
-import { type ExecutionResult, graphql as executeGraphql } from 'graphql';
-import { HttpResponse, graphql } from 'msw';
+import { type ExecutionResult, graphql } from 'graphql';
+import { HttpResponse } from 'msw';
 import type { PostsSlugsResponse } from '../../../../src/services/graphql';
 import { wpPostsFixture } from '../../../fixtures';
+import { wordpressAPI } from '../../instances';
 import { schema } from '../../schema';
 
-export const postsSlugsHandler = graphql.query<
+export const postsSlugsHandler = wordpressAPI.query<
   PostsSlugsResponse,
   Record<'first', number>
 >('PostsSlugs', async ({ query, variables }) => {
@@ -13,7 +14,7 @@ export const postsSlugsHandler = graphql.query<
 
   if (isError) return HttpResponse.json({ data: { posts: null } });
 
-  const { data, errors } = (await executeGraphql({
+  const { data, errors } = (await graphql({
     schema,
     source: query,
     variableValues: variables,
diff --git a/tests/msw/handlers/posts/recent-posts.handler.ts b/tests/msw/handlers/posts/recent-posts.handler.ts
index 34e0efb..eb89324 100644
--- a/tests/msw/handlers/posts/recent-posts.handler.ts
+++ b/tests/msw/handlers/posts/recent-posts.handler.ts
@@ -1,14 +1,15 @@
-import { type ExecutionResult, graphql as executeGraphql } from 'graphql';
-import { HttpResponse, graphql } from 'msw';
+import { type ExecutionResult, graphql } from 'graphql';
+import { HttpResponse } from 'msw';
 import type {
   FetchPostsListInput,
   RecentPostsResponse,
 } from '../../../../src/services/graphql';
 import { wpPostsFixture } from '../../../fixtures';
 import { getConnection } from '../../../utils/graphql';
+import { wordpressAPI } from '../../instances';
 import { schema } from '../../schema';
 
-export const recentPostsHandler = graphql.query<
+export const recentPostsHandler = wordpressAPI.query<
   RecentPostsResponse,
   FetchPostsListInput
 >('RecentPosts', async ({ query, variables }) => {
@@ -17,7 +18,7 @@ export const recentPostsHandler = graphql.query<
 
   if (isError) return HttpResponse.json({ data: { posts: null } });
 
-  const { data, errors } = (await executeGraphql({
+  const { data, errors } = (await graphql({
     schema,
     source: query,
     variableValues: variables,
diff --git a/tests/msw/handlers/repositories/index.ts b/tests/msw/handlers/repositories/index.ts
new file mode 100644
index 0000000..b29a41f
--- /dev/null
+++ b/tests/msw/handlers/repositories/index.ts
@@ -0,0 +1,3 @@
+import { repositoryHandler } from './repository.handler';
+
+export const repositoriesHandlers = [repositoryHandler];
diff --git a/tests/msw/handlers/repositories/repository.handler.ts b/tests/msw/handlers/repositories/repository.handler.ts
new file mode 100644
index 0000000..2c459c1
--- /dev/null
+++ b/tests/msw/handlers/repositories/repository.handler.ts
@@ -0,0 +1,32 @@
+import { type ExecutionResult, graphql } from 'graphql';
+import { HttpResponse } from 'msw';
+import type {
+  FetchGithubRepoMetaInput,
+  GithubRepositoryResponse,
+} from '../../../../src/services/github';
+import { githubRepos } from '../../../fixtures';
+import { githubAPI } from '../../instances';
+import { githubSchema } from '../../schema';
+
+export const repositoryHandler = githubAPI.query<
+  GithubRepositoryResponse,
+  FetchGithubRepoMetaInput
+>('GithubRepository', async ({ query, variables }) => {
+  const pageParams = new URLSearchParams(window.location.search);
+  const isError = pageParams.get('error') === 'true';
+
+  if (isError) return HttpResponse.json({ data: { repository: null } });
+
+  const { data, errors } = (await graphql({
+    schema: githubSchema,
+    source: query,
+    variableValues: variables,
+    rootValue: {
+      repository: githubRepos.find(
+        (repo) => repo.owner === variables.owner && repo.name === variables.name
+      ),
+    },
+  })) as ExecutionResult<GithubRepositoryResponse>;
+
+  return HttpResponse.json({ data, errors });
+});
diff --git a/tests/msw/handlers/thematics/thematic.handler.ts b/tests/msw/handlers/thematics/thematic.handler.ts
index 1e7d129..ad82ea6 100644
--- a/tests/msw/handlers/thematics/thematic.handler.ts
+++ b/tests/msw/handlers/thematics/thematic.handler.ts
@@ -1,14 +1,15 @@
-import { type ExecutionResult, graphql as executeGraphql } from 'graphql';
-import { HttpResponse, graphql } from 'msw';
+import { type ExecutionResult, graphql } from 'graphql';
+import { HttpResponse } from 'msw';
 import type { ThematicResponse } from '../../../../src/services/graphql';
 import { wpThematicsFixture } from '../../../fixtures';
+import { wordpressAPI } from '../../instances';
 import { schema } from '../../schema';
 
-export const thematicHandler = graphql.query<
+export const thematicHandler = wordpressAPI.query<
   ThematicResponse,
   Record<'slug', string>
 >('Thematic', async ({ query, variables }) => {
-  const { data, errors } = (await executeGraphql({
+  const { data, errors } = (await graphql({
     schema,
     source: query,
     variableValues: variables,
diff --git a/tests/msw/handlers/thematics/thematics-count.handler.ts b/tests/msw/handlers/thematics/thematics-count.handler.ts
index 4bcdf2d..8a1f12e 100644
--- a/tests/msw/handlers/thematics/thematics-count.handler.ts
+++ b/tests/msw/handlers/thematics/thematics-count.handler.ts
@@ -1,12 +1,13 @@
 import { type ExecutionResult, graphql as executeGraphql } from 'graphql';
-import { HttpResponse, graphql } from 'msw';
+import { HttpResponse } from 'msw';
 import type { ThematicsCountResponse } from '../../../../src/services/graphql';
 import type { GraphQLPostWhere } from '../../../../src/types';
 import { wpThematicsFixture } from '../../../fixtures';
 import { getConnection } from '../../../utils/graphql';
+import { wordpressAPI } from '../../instances';
 import { schema } from '../../schema';
 
-export const thematicsCountHandler = graphql.query<
+export const thematicsCountHandler = wordpressAPI.query<
   ThematicsCountResponse,
   GraphQLPostWhere
 >('ThematicsCount', async ({ query, variables }) => {
diff --git a/tests/msw/handlers/thematics/thematics-list.handler.ts b/tests/msw/handlers/thematics/thematics-list.handler.ts
index 7afec4c..790fa5a 100644
--- a/tests/msw/handlers/thematics/thematics-list.handler.ts
+++ b/tests/msw/handlers/thematics/thematics-list.handler.ts
@@ -1,14 +1,15 @@
 import { type ExecutionResult, graphql as executeGraphql } from 'graphql';
-import { HttpResponse, graphql } from 'msw';
+import { HttpResponse } from 'msw';
 import type {
   FetchThematicsListInput,
   ThematicsListResponse,
 } from '../../../../src/services/graphql';
 import { wpThematicsFixture } from '../../../fixtures';
 import { getConnection } from '../../../utils/graphql';
+import { wordpressAPI } from '../../instances';
 import { schema } from '../../schema';
 
-export const thematicsListHandler = graphql.query<
+export const thematicsListHandler = wordpressAPI.query<
   ThematicsListResponse,
   FetchThematicsListInput
 >('ThematicsList', async ({ query, variables }) => {
diff --git a/tests/msw/handlers/thematics/thematics-slugs.handler.ts b/tests/msw/handlers/thematics/thematics-slugs.handler.ts
index 3a71c8e..77bbeda 100644
--- a/tests/msw/handlers/thematics/thematics-slugs.handler.ts
+++ b/tests/msw/handlers/thematics/thematics-slugs.handler.ts
@@ -1,10 +1,11 @@
 import { type ExecutionResult, graphql as executeGraphql } from 'graphql';
-import { HttpResponse, graphql } from 'msw';
+import { HttpResponse } from 'msw';
 import type { ThematicsSlugsResponse } from '../../../../src/services/graphql';
 import { wpThematicsFixture } from '../../../fixtures';
+import { wordpressAPI } from '../../instances';
 import { schema } from '../../schema';
 
-export const thematicsSlugsHandler = graphql.query<
+export const thematicsSlugsHandler = wordpressAPI.query<
   ThematicsSlugsResponse,
   Record<'first', number>
 >('ThematicsSlugs', async ({ query, variables }) => {
diff --git a/tests/msw/handlers/topics/topic.handler.ts b/tests/msw/handlers/topics/topic.handler.ts
index 5df00ea..1cb565b 100644
--- a/tests/msw/handlers/topics/topic.handler.ts
+++ b/tests/msw/handlers/topics/topic.handler.ts
@@ -1,14 +1,15 @@
-import { type ExecutionResult, graphql as executeGraphql } from 'graphql';
-import { HttpResponse, graphql } from 'msw';
+import { type ExecutionResult, graphql } from 'graphql';
+import { HttpResponse } from 'msw';
 import type { TopicResponse } from '../../../../src/services/graphql';
 import { wpTopicsFixture } from '../../../fixtures';
+import { wordpressAPI } from '../../instances';
 import { schema } from '../../schema';
 
-export const topicHandler = graphql.query<
+export const topicHandler = wordpressAPI.query<
   TopicResponse,
   Record<'slug', string>
 >('Topic', async ({ query, variables }) => {
-  const { data, errors } = (await executeGraphql({
+  const { data, errors } = (await graphql({
     schema,
     source: query,
     variableValues: variables,
diff --git a/tests/msw/handlers/topics/topics-count.handler.ts b/tests/msw/handlers/topics/topics-count.handler.ts
index 7e3dab9..0a48d06 100644
--- a/tests/msw/handlers/topics/topics-count.handler.ts
+++ b/tests/msw/handlers/topics/topics-count.handler.ts
@@ -1,12 +1,13 @@
-import { type ExecutionResult, graphql as executeGraphql } from 'graphql';
-import { HttpResponse, graphql } from 'msw';
+import { type ExecutionResult, graphql } from 'graphql';
+import { HttpResponse } from 'msw';
 import type { TopicsCountResponse } from '../../../../src/services/graphql';
 import type { GraphQLPostWhere } from '../../../../src/types';
 import { wpTopicsFixture } from '../../../fixtures';
 import { getConnection } from '../../../utils/graphql';
+import { wordpressAPI } from '../../instances';
 import { schema } from '../../schema';
 
-export const topicsCountHandler = graphql.query<
+export const topicsCountHandler = wordpressAPI.query<
   TopicsCountResponse,
   GraphQLPostWhere
 >('TopicsCount', async ({ query, variables }) => {
@@ -15,7 +16,7 @@ export const topicsCountHandler = graphql.query<
 
   if (isError) return HttpResponse.json({ data: { topics: null } });
 
-  const { data, errors } = (await executeGraphql({
+  const { data, errors } = (await graphql({
     schema,
     source: query,
     variableValues: variables,
diff --git a/tests/msw/handlers/topics/topics-list.handler.ts b/tests/msw/handlers/topics/topics-list.handler.ts
index 4b09c5a..86a8dba 100644
--- a/tests/msw/handlers/topics/topics-list.handler.ts
+++ b/tests/msw/handlers/topics/topics-list.handler.ts
@@ -1,14 +1,15 @@
-import { type ExecutionResult, graphql as executeGraphql } from 'graphql';
-import { HttpResponse, graphql } from 'msw';
+import { type ExecutionResult, graphql } from 'graphql';
+import { HttpResponse } from 'msw';
 import type {
   FetchTopicsListInput,
   TopicsListResponse,
 } from '../../../../src/services/graphql';
 import { wpTopicsFixture } from '../../../fixtures';
 import { getConnection } from '../../../utils/graphql';
+import { wordpressAPI } from '../../instances';
 import { schema } from '../../schema';
 
-export const topicsListHandler = graphql.query<
+export const topicsListHandler = wordpressAPI.query<
   TopicsListResponse,
   FetchTopicsListInput
 >('TopicsList', async ({ query, variables }) => {
@@ -17,7 +18,7 @@ export const topicsListHandler = graphql.query<
 
   if (isError) return HttpResponse.json({ data: { topics: null } });
 
-  const { data, errors } = (await executeGraphql({
+  const { data, errors } = (await graphql({
     schema,
     source: query,
     variableValues: variables,
diff --git a/tests/msw/handlers/topics/topics-slugs.handler.ts b/tests/msw/handlers/topics/topics-slugs.handler.ts
index 960e411..779a384 100644
--- a/tests/msw/handlers/topics/topics-slugs.handler.ts
+++ b/tests/msw/handlers/topics/topics-slugs.handler.ts
@@ -1,10 +1,11 @@
-import { type ExecutionResult, graphql as executeGraphql } from 'graphql';
-import { HttpResponse, graphql } from 'msw';
+import { type ExecutionResult, graphql } from 'graphql';
+import { HttpResponse } from 'msw';
 import type { TopicsSlugsResponse } from '../../../../src/services/graphql';
 import { wpTopicsFixture } from '../../../fixtures';
+import { wordpressAPI } from '../../instances';
 import { schema } from '../../schema';
 
-export const topicsSlugsHandler = graphql.query<
+export const topicsSlugsHandler = wordpressAPI.query<
   TopicsSlugsResponse,
   Record<'first', number>
 >('TopicsSlugs', async ({ query, variables }) => {
@@ -13,7 +14,7 @@ export const topicsSlugsHandler = graphql.query<
 
   if (isError) return HttpResponse.json({ data: { topics: null } });
 
-  const { data, errors } = (await executeGraphql({
+  const { data, errors } = (await graphql({
     schema,
     source: query,
     variableValues: variables,
diff --git a/tests/msw/instances/index.ts b/tests/msw/instances/index.ts
new file mode 100644
index 0000000..82218c3
--- /dev/null
+++ b/tests/msw/instances/index.ts
@@ -0,0 +1,10 @@
+import { graphql } from 'msw';
+import { GITHUB_API } from '../../../src/utils/constants';
+
+const wordpressGraphQLUrl = process.env.NEXT_PUBLIC_STAGING_GRAPHQL_API;
+
+if (!wordpressGraphQLUrl)
+  throw new Error('You forgot to define an URL for the WordPress GraphQL API');
+
+export const githubAPI = graphql.link(GITHUB_API);
+export const wordpressAPI = graphql.link(wordpressGraphQLUrl);
diff --git a/tests/msw/schema/index.ts b/tests/msw/schema/index.ts
index 3763616..c818d50 100644
--- a/tests/msw/schema/index.ts
+++ b/tests/msw/schema/index.ts
@@ -36,3 +36,20 @@ export const schema = addResolversToSchema({
   schema: schemaFromTypes,
   resolvers,
 });
+
+export const githubSchema = buildSchema(`
+scalar DateTime
+
+type Repository {
+  createdAt: DateTime!
+  stargazerCount: Int!
+  updatedAt: DateTime!
+}
+
+type Query {
+  repository(
+    followRenames: Boolean = true
+    name: String!
+    owner: String!
+  ): Repository
+}`);