refactor: use react-query instead (#108)

* fix: hide env

* feat: use translation for seo

* fix: downgrade graphql-tools

* fix: redirect to current look when changing locale

* test: update test with intl

* ci: added .env to cache

* ci(perf): added a build step to lhci

* refactor: remove apollo client

* fix: update env

Author: FabienGreard

.env.example

@@ -2,6 +2,7 @@ HOSTNAME=localhost
 PORT=3000
 # https://nextjs.org/docs/basic-features/environment-variables#exposing-environment-variables-to-the-browser
 NEXT_PUBLIC_HOST=http://$HOSTNAME:$PORT
+NEXT_PUBLIC_GRAPHQL_ENDPOINT=/api/graphql
 # You can start with this url, but you may need to configure your own database as this is only an example with a read only user !
 DATABASE_URL=postgresql://baby_kirby:1234@kirby.cgqxnhhl7oal.eu-west-3.rds.amazonaws.com:5432/kirby?schema=public
-GRAPHQL_ENDPOINT=http://localhost:3000/api/graphql
+

.github/workflows/tests.yml

@@ -96,6 +96,7 @@ jobs:
             .next
             node_modules
             ~/.cache/Cypress
+            .env
           key: ${{ runner.os }}-build-${{ hashFiles('**/yarn.lock') }}
           restore-keys: |
             ${{ runner.os }}-node_modules-
@@ -109,6 +110,9 @@ jobs:
         if: steps.yarn-build-cache.outputs.cache-hit != 'true'
         run: yarn install
 
+      - name: Populate env
+        run: cp .env.example .env
+
       - name: Build
         run: yarn build
 
@@ -134,6 +138,7 @@ jobs:
             .next
             node_modules
             ~/.cache/Cypress
+            .env
           key: ${{ runner.os }}-build-${{ hashFiles('**/yarn.lock') }}
           restore-keys: |
             ${{ runner.os }}-build-
@@ -147,6 +152,10 @@ jobs:
         if: steps.yarn-build-cache.outputs.cache-hit != 'true'
         run: yarn install
 
+      - name: Build
+        if: steps.yarn-build-cache.outputs.cache-hit != 'true'
+        run: yarn build
+
       - name: Install Lhci
         run: npm install -g @lhci/cli@0.8.x
 
@@ -169,6 +178,7 @@ jobs:
             .next
             node_modules
             ~/.cache/Cypress
+            .env
           key: ${{ runner.os }}-build-${{ hashFiles('**/yarn.lock') }}
           restore-keys: |
             ${{ runner.os }}-build-

README.md

@@ -71,20 +71,21 @@ Open [http://localhost:3000](http://localhost:3000) with your browser to see the
 This project is build with :
 
 - [NextJs](https://nextjs.org/)
+- [React-Query](https://react-query.tanstack.com/)
 - [Apollo](https://www.apollographql.com/)
-- [prisma](https://www.prisma.io/)
+- [Prisma](https://www.prisma.io/)
 - [Tailwindcss](https://tailwindcss.com/)
 - [Typescript](https://www.typescriptlang.org/)
-- [react-intl](https://formatjs.io/)
+- [React-Intl](https://formatjs.io/)
 - [Jest](https://jestjs.io/)
-- [storybook](https://storybook.js.org/)
+- [Storybook](https://storybook.js.org/)
 - [Cypress](https://www.cypress.io/)
 - [Prettier](https://prettier.io/)
 - [Eslint](https://eslint.org/)
-- [husky](https://typicode.github.io/husky/#/)
-- [commitlint](https://commitlint.js.org/#/)
-- [standard-version](https://github.com/conventional-changelog/standard-version)
-- [vscode](https://code.visualstudio.com/)
+- [Husky](https://typicode.github.io/husky/#/)
+- [Commitlint](https://commitlint.js.org/#/)
+- [Standard-Version](https://github.com/conventional-changelog/standard-version)
+- [Vscode](https://code.visualstudio.com/)
 
 ## Tests
 
@@ -144,6 +145,10 @@ With the graphql endpoint running launch `yarn codegen`, this will create a typi
 
 Kirby use [vercel](https://vercel.com/docs) however you can use any other hosting service.
 
+In order to not populate `.env` and still being able to deploy we are using [vercel-env](https://vercel.com/docs/concepts/projects/environment-variables).
+
+You need to add both `NEXT_PUBLIC_GRAPHQL_ENDPOINT` and `DATABASE_URL` to have a sucessfull deployment on vercel.
+
 ## Roadmap:
 
 (Would love Pull requests that build towards these objectives)

apollo/client.ts

@@ -1,9 +1,7 @@
-import { makeExecutableSchema } from '@graphql-tools/schema';
-
 import typeDefs from './type-defs';
 import resolvers from './resolvers';
 
-export default makeExecutableSchema({
+export default {
   typeDefs,
   resolvers,
-});
+};

apollo/schema.ts

@@ -1,4 +1,4 @@
-import { gql } from '@apollo/client';
+import { gql } from 'apollo-server-micro';
 
 export default gql`
   type User {

apollo/type-defs.ts

@@ -1,6 +1,13 @@
+overwrite: true
 schema:
-  - ${GRAPHQL_ENDPOINT}
+  - http://${HOSTNAME}:${PORT}${GRAPHQL_ENDPOINT}
+documents:
+  - './operations/**/*.ts'
 generates:
   ./types/schema.ts:
     plugins:
       - typescript
+      - typescript-operations
+      - typescript-react-query
+    config:
+      fetcher: graphql-request

codegen.yml

@@ -7,7 +7,7 @@ interface Props {
   description?: string;
 }
 
-export default function Head({ title = SEO.title, description = SEO.description }: Props) {
+export default function Head({ title = SEO().title, description = SEO().description }: Props) {
   return (
     <NextHead>
       <title>{title}</title>

components/Head.tsx

@@ -1,4 +1,5 @@
 import { useIntl } from 'react-intl';
+import { useRouter } from 'next/router';
 
 import Head from 'components/Head';
 import GithubSVG from 'components/Icons/Github';
@@ -32,11 +33,12 @@ const Header = () => {
 
 const Footer = () => {
   const { formatDate } = useIntl();
+  const { route } = useRouter();
 
   const Langs = () => (
     <div className="flex justify-center space-x-1">
       {Object.keys(langs).map(lang => (
-        <ButtonWithLink key={lang} locale={lang} href="/" label={lang} size="small" />
+        <ButtonWithLink key={lang} locale={lang} href={route} label={lang} size="small" />
       ))}
     </div>
   );

components/Layout.tsx

@@ -7,8 +7,8 @@ describe('Header', () => {
   test('Should had default values', () => {
     render(<Head />);
 
-    expect(document.title).toEqual(SEO.title);
-    expect((document.head.querySelector('meta[name=description]') as HTMLMetaElement).content).toEqual(SEO.description);
+    expect(document.title).toEqual(SEO().title);
+    expect((document.head.querySelector('meta[name=description]') as HTMLMetaElement).content).toEqual(SEO().description);
   });
 
   test('Should set a custom document title', () => {

components/__tests__/Head.test.tsx

@@ -1,6 +1,12 @@
 import { render } from 'utils/customTestRender';
 import Layout from 'components/Layout';
 
+jest.mock('next/router', () => ({
+  useRouter: () => ({
+    route: '/',
+  }),
+}));
+
 describe('Layout', () => {
   test('Should render a Layout element', () => {
     const { getByText, getByTestId } = render(

components/__tests__/Layout.test.tsx

@@ -4,6 +4,7 @@ module.exports = {
     '^components(.*)$': '<rootDir>/components/$1',
     '^design-system(.*)$': '<rootDir>/design-system$1',
     '^apollo(.*)$': '<rootDir>/apollo$1',
+    '^operations(.*)$': '<rootDir>/operations$1',
     '^types(.*)$': '<rootDir>/types$1',
     '^pages(.*)$': '<rootDir>/pages$1',
     '^utils(.*)$': '<rootDir>/utils$1',
@@ -20,14 +21,7 @@ module.exports = {
       },
     },
   },
-  collectCoverageFrom: [
-    'hooks/**/*.(ts|tsx)',
-    'components/**/*.(ts|tsx)',
-    'design-system/**/*.(ts|tsx)',
-    'utils/**/*.(ts|tsx)',
-    '!utils/customTestRender.(ts|tsx)',
-    '!utils/constants.(ts|tsx)',
-  ],
+  collectCoverageFrom: ['hooks/**/*.(ts|tsx)', 'components/**/*.(ts|tsx)', 'design-system/**/*.(ts|tsx)'],
   coverageThreshold: {
     global: {
       branches: 80,

hooks/__tests__/useClientQuery.test.tsx

@@ -2,4 +2,6 @@ export default {
   greetings: 'Hello {name} !',
   editingMessage: 'Get started by editing',
   githubLinkMessage: 'Follow Kirby on github !',
+  title: 'Kirby Boilerplate',
+  description: 'This is an opinionated boilerplate with rocking tools for front-end development.',
 };

hooks/__tests__/useHasMounted.test.ts

@@ -2,4 +2,7 @@ export default {
   greetings: 'Bonjour {name} !',
   editingMessage: 'Commencez par éditer',
   githubLinkMessage: 'Suivez Kirby sur github !',
+  title: 'Kirby Boilerplate',
+  description:
+    'Kirby-boilerplate est un boilerblate subjectif avec tous les derniers outils pour du developpement front-end.',
 };

hooks/useClientQuery.ts

@@ -1,7 +1,7 @@
-import { gql } from '@apollo/client';
+import { gql } from 'graphql-request';
 
 export default gql`
-  query ViewerQuery {
+  query Viewer {
     viewer {
       id
       name