Strapi

apollo/apollo-client.ts

@@ -0,0 +1,18 @@
+import { ApolloClient, InMemoryCache } from '@apollo/client';
+
+const apolloClient = new ApolloClient({
+  uri: process.env.GRAPHQL_URL,
+  cache: new InMemoryCache(),
+  defaultOptions: {
+    watchQuery: {
+      fetchPolicy: 'no-cache',
+      errorPolicy: 'ignore',
+    },
+    query: {
+      fetchPolicy: 'no-cache',
+      errorPolicy: 'all',
+    },
+  },
+});
+
+export default apolloClient;

graphql.config.yml

@@ -0,0 +1 @@
+schema: https://martacodes-it-strapi.up.railway.app/graphql

next.config.js

@@ -15,7 +15,7 @@ const nextConfig = {
   // },
 
   images: {
-    domains: ['cdn.sanity.io'],
+    domains: ['cdn.sanity.io', 'res.cloudinary.com'],
     remotePatterns: [
       {
         protocol: 'https',

package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --port 3001",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
@@ -23,6 +23,7 @@
     "sanity:prod": "sanity build && sanity start"
   },
   "dependencies": {
+    "@apollo/client": "^3.8.1",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@mui/material": "^5.13.5",
@@ -40,34 +41,40 @@
     "clsx": "^1.2.1",
     "focus-trap-react": "^10.1.4",
     "framer-motion": "^10.12.18",
+    "graphql": "^16.8.0",
+    "i18next": "^23.4.5",
     "inquirer-fuzzy-path": "^2.3.0",
     "next": "^13.4.9",
+    "next-cloudinary": "^4.18.0",
     "next-sanity": "5.1.0",
     "next-themes": "^0.2.1",
     "plop": "^3.1.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-headroom": "^3.2.1",
+    "react-i18next": "^13.2.0",
     "react-icons": "^4.10.1",
+    "react-markdown": "^8.0.7",
     "react-syntax-highlighter": "^15.5.0",
     "react-tippy": "^1.4.0",
     "sanity": "^3.0.0",
     "sanity-plugin-internationalized-array": "^1.7.0",
     "sanity-plugin-media": "^2.2.1",
+    "strapi-flatten-graphql": "^0.1.0",
     "styled-components": "^5.2.0",
     "tailwind-merge": "^1.12.0",
     "typed.js": "^2.0.16"
   },
   "devDependencies": {
     "@commitlint/cli": "^16.3.0",
     "@commitlint/config-conventional": "^16.2.4",
-    "@storybook/addon-essentials": "^7.1.1",
-    "@storybook/addon-interactions": "^7.1.1",
-    "@storybook/addon-links": "^7.1.1",
-    "@storybook/blocks": "^7.1.1",
-    "@storybook/nextjs": "^7.1.1",
-    "@storybook/react": "^7.1.1",
-    "@storybook/testing-library": "^0.0.14-next.2",
+    "@storybook/addon-essentials": "^7.3.2",
+    "@storybook/addon-interactions": "^7.3.2",
+    "@storybook/addon-links": "^7.3.2",
+    "@storybook/blocks": "^7.3.2",
+    "@storybook/nextjs": "^7.3.2",
+    "@storybook/react": "^7.3.2",
+    "@storybook/testing-library": "^0.2.0",
     "@svgr/webpack": "^6.5.1",
     "@tailwindcss/forms": "^0.5.3",
     "@testing-library/jest-dom": "^5.16.5",
@@ -82,7 +89,7 @@
     "eslint-config-next": "^13.4.4",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-simple-import-sort": "^7.0.0",
-    "eslint-plugin-storybook": "^0.6.12",
+    "eslint-plugin-storybook": "^0.6.13",
     "eslint-plugin-unused-imports": "^2.0.0",
     "husky": "^7.0.4",
     "jest": "^27.5.1",
@@ -92,7 +99,7 @@
     "postcss": "^8.4.23",
     "prettier": "^2.8.8",
     "prettier-plugin-tailwindcss": "^0.1.13",
-    "storybook": "^7.0.20",
+    "storybook": "^7.3.2",
     "tailwindcss": "^3.3.2",
     "typescript": "^4.9.5"
   },

src/app/(public)/about/free-time/page.tsx

@@ -1,5 +1,7 @@
+import { DocumentNode } from 'graphql/language';
 import * as React from 'react';
 
+import { flattenToArray } from '@/lib/graphqlUtils';
 import { shuffleArray } from '@/lib/helper';
 
 import { QuizData, QuizOption } from '@/components/molecules/RandomFacts/Quiz';
@@ -10,58 +12,92 @@ import RandomFacts from '@/components/organisms/about-free-time/RandomFacts';
 import TvSeries from '@/components/organisms/about-free-time/TvSeries';
 import VideoGames from '@/components/organisms/about-free-time/VideoGames';
 
-import { booksQuery } from '@/queries/books';
-import { podcastsQuery } from '@/queries/podcasts';
+import { booksQueryQL } from '@/queries/books';
+import { podcastsQueryQL } from '@/queries/podcasts';
 import {
-  falseRandomFactsQuery,
-  selectedTrueRandomFactsQuery,
-  trueRandomFactsQuery,
+  falseRandomFactsQueryQL,
+  selectedTrueRandomFactsQueryQL,
+  trueRandomFactsQueryQL,
 } from '@/queries/random-facts';
-import { tvSeriesQuery } from '@/queries/tv-series';
-import { videoGamesQuery } from '@/queries/video-games';
+import { tvShowsQueryQL } from '@/queries/tv-shows';
+import { videoGamesQueryQL } from '@/queries/video-games';
 
-import { sanityClient } from '../../../../../sanity/lib/client';
+import apolloClient from '../../../../../apollo/apollo-client';
 
 import { Book } from '@/types/Book';
 import { Podcast } from '@/types/Podcast';
 import { RandomFact } from '@/types/RandomFact';
-import { TvShow } from '@/types/TvSeries';
+import { TvShow } from '@/types/TvShow';
 import { VideoGame } from '@/types/VideoGame';
 
 export const metadata = {
   title: 'About my Free Time | MartaCodes.it',
   description: 'About page',
 };
 
-const getData = async () => {
-  const books: Book[] = await sanityClient.fetch(booksQuery);
+async function queryBooks() {
+  const { data } = await apolloClient.query({ query: booksQueryQL });
+
+  return flattenToArray<Book>(data.books);
+}
+
+async function queryPodcasts() {
+  const { data } = await apolloClient.query({ query: podcastsQueryQL });
+
+  return flattenToArray<Podcast>(data.podcasts);
+}
+
+async function queryTvShows() {
+  const { data } = await apolloClient.query({ query: tvShowsQueryQL });
 
-  const podcasts: Podcast[] = await sanityClient.fetch(podcastsQuery);
+  return flattenToArray<TvShow>(data.tvShows);
+}
 
-  const tvSeries: TvShow[] = await sanityClient.fetch(tvSeriesQuery);
+async function queryVideoGames() {
+  const { data } = await apolloClient.query({ query: videoGamesQueryQL });
 
-  const videoGames: VideoGame[] = await sanityClient.fetch(videoGamesQuery);
+  return flattenToArray<VideoGame>(data.videoGames);
+}
 
+async function queryRandomFacts(query: DocumentNode) {
+  const { data } = await apolloClient.query({ query });
+
+  return flattenToArray<RandomFact>(data.randomFacts);
+}
+
+const getData = async () => {
   const randomFacts: QuizData = await loadRandomFactsForQuiz();
 
+  return {
+    randomFacts,
+  };
+};
+
+const queryData = async () => {
+  const books = await queryBooks();
+  const podcasts = await queryPodcasts();
+  const tvShows = await queryTvShows();
+  const videoGames = await queryVideoGames();
+
   return {
     books,
     podcasts,
-    tvSeries,
+    tvShows,
     videoGames,
-    randomFacts,
   };
 };
 
 const loadRandomFactsForQuiz = async () => {
-  const falseFacts: RandomFact[] = await sanityClient.fetch(
-    falseRandomFactsQuery
+  const falseFacts: RandomFact[] = await queryRandomFacts(
+    falseRandomFactsQueryQL
   );
-  const selectedTrueFacts: RandomFact[] = await sanityClient.fetch(
-    selectedTrueRandomFactsQuery
+
+  const selectedTrueFacts: RandomFact[] = await queryRandomFacts(
+    selectedTrueRandomFactsQueryQL
   );
-  const trueFacts: RandomFact[] = await sanityClient.fetch(
-    trueRandomFactsQuery
+
+  const trueFacts: RandomFact[] = await queryRandomFacts(
+    trueRandomFactsQueryQL
   );
 
   const oneFalseFact: RandomFact = shuffleArray(falseFacts)[0];
@@ -104,8 +140,9 @@ const loadRandomFactsForQuiz = async () => {
 };
 
 const AboutFreeTimePage = async () => {
-  const { books, podcasts, tvSeries, videoGames, randomFacts } =
-    await getData();
+  const { randomFacts } = await getData();
+
+  const { books, podcasts, tvShows, videoGames } = await queryData();
 
   return (
     <main className='min-h-main'>
@@ -128,7 +165,7 @@ const AboutFreeTimePage = async () => {
 
           <VideoGames videoGames={videoGames} />
 
-          <TvSeries tvSeries={tvSeries} />
+          <TvSeries tvShows={tvShows} />
 
           <Music />