More removing of graphql/cms

.nowignore

@@ -6,7 +6,6 @@ coverage/
 .codeclimate.yml
 .editorconfig
 .env.build.example
-.graphqlconfig
 buildspec.yml
 README.md
 yarn.lock

next.config.js

@@ -21,8 +21,6 @@ module.exports = withBundleAnalyzer(withSourceMaps({
     //  See https://nextjs.org/docs/api-reference/next.config.js/environment-variables
     // XXX Duplication of the environment variables, this is only used locally
     //  while now.json:build:env will be used on the Now platform (See https://vercel.com/docs/v2/build-step/#providing-environment-variables)
-    GRAPHQL_API_ENDPOINT: process.env.GRAPHQL_API_ENDPOINT,
-    GRAPHQL_API_KEY: process.env.GRAPHQL_API_KEY,
     LOCIZE_API_KEY: process.env.LOCIZE_API_KEY,
     SENTRY_DSN: process.env.SENTRY_DSN,
 

process.env.d.ts

@@ -13,8 +13,6 @@ declare global {
       // NRN env variables
       AIRTABLE_API_KEY: string;
       AIRTABLE_BASE_ID: string;
-      GRAPHQL_API_ENDPOINT: string;
-      GRAPHQL_API_KEY: string;
       LOCIZE_API_KEY: string;
       NODE_ENV: 'development' | 'production';
       NEXT_PUBLIC_AMPLITUDE_API_KEY: string;

src/components/pageLayouts/Head.tsx

@@ -21,7 +21,7 @@ export type HeadProps = {
  * https://github.com/vercel/next.js#populating-head
  */
 const Head: React.FunctionComponent<HeadProps> = (props): JSX.Element => {
-  const defaultDescription = 'Flexible production-grade boilerplate with Next.js 9, Zeit and TypeScript. Includes multiple opt-in presets using GraphQL, Analytics, CSS-in-JS, Monitoring, End-to-end testing, Internationalization, CI/CD and SaaS B2B multiple single-tenants (monorepo) support';
+  const defaultDescription = 'Flexible production-grade boilerplate with Next.js 9, Zeit and TypeScript. Includes multiple opt-in presets using Airtable, Analytics, CSS-in-JS, Monitoring, End-to-end testing, Internationalization, CI/CD and SaaS B2B multiple single-tenants (monorepo) support';
   const defaultOGURL = 'https://github.com/UnlyEd/next-right-now';
   const defaultOGImage = 'https://storage.googleapis.com/the-funding-place/assets/images/Logo_TFP_quadri_horizontal.svg';
   const defaultFavicon = 'https://storage.googleapis.com/the-funding-place/assets/images/default_favicon.ico';

src/components/pageLayouts/Nav.tsx

@@ -248,13 +248,13 @@ const Nav: React.FunctionComponent<Props> = () => {
                 <Row className={'justify-content-center'}>
                   <NavLink
                     id={'nav-link-admin-site'}
-                    href={`https://nrn-admin.now.sh`}
+                    href={``}
                     target={'_blank'}
                     rel={'noopener'}
                     onClick={(): void => {
                       logEvent('open-admin-site');
                     }}
-                    title={'Edit dynamic content using GraphCMS and react-admin!'}
+                    title={'Edit dynamic content using Airtable and Stacker!'}
                   >
                     <FontAwesomeIcon icon={['fas', 'user-cog']} />
                     {t('nav.adminSite.link', 'Admin site')}

src/pages/[locale]/examples/built-in-features/api.tsx

@@ -45,7 +45,7 @@ export const getStaticProps: GetStaticProps<SSGPageProps, StaticParams> = getExa
  */
 type Props = {} & SSGPageProps<Partial<OnlyBrowserPageProps>>;
 
-const ExampleGraphQLPage: NextPage<Props> = (props): JSX.Element => {
+const ExampleApiPage: NextPage<Props> = (props): JSX.Element => {
   return (
     <DefaultLayout
       {...props}
@@ -77,4 +77,4 @@ const ExampleGraphQLPage: NextPage<Props> = (props): JSX.Element => {
   );
 };
 
-export default (ExampleGraphQLPage);
+export default (ExampleApiPage);

src/pages/[locale]/examples/built-in-features/static-i18n.tsx

@@ -70,7 +70,7 @@ const ExampleStaticI18nPage: NextPage<Props> = (props): JSX.Element => {
 
         <Alert color={'warning'}>
           This section only showcases i18n for <b>static content</b> (nav, footer, etc.). <br />
-          Dynamic content (DB records) is managed through <b>GraphCMS</b> and is completely unrelated.
+          Dynamic content (DB records) is managed through <b>Airtable</b> and is completely unrelated.
         </Alert>
 
         NRN provides built-in static i18n support, based on:<br />

src/pages/[locale]/examples/native-features/example-with-ssr.tsx

@@ -72,7 +72,7 @@ const ProductsWithSSRPage: NextPage<Props> = (props): JSX.Element => {
           <br />
           <ExternalLink href={'https://nextjs.org/docs/basic-features/data-fetching#only-runs-on-server-side'}>Learn more about the technical details</ExternalLink><br />
           <br />
-          Each page refresh (either SSR or CSR) queries the GraphQL API and displays products below.<br />
+          Each page refresh (either SSR or CSR) queries the Airtable API and displays products below.<br />
           <br />
           If you use <ExternalLink href={'https://nrn-admin.now.sh/'}>NRN Admin</ExternalLink> and update the products there,{' '}
           then the products below will be updated immediately, because each page refresh will fetch the latest content.<br />
@@ -86,87 +86,4 @@ const ProductsWithSSRPage: NextPage<Props> = (props): JSX.Element => {
   );
 };
 
-// XXX For educational purposes - Equivalent to above "getServerSideProps"
-//  Note that CSR fails with below code because we didn't check if req/res were available before usage (and I didn't fix it because switching to getServerSideProps looks cleaner and less tricky IMHO)
-// ProductsPage.getInitialProps = async (context: NextPageContext & { apolloClient: ApolloClient<NormalizedCacheObject> }): Promise<Props> => {
-//   const {
-//     apolloClient,
-//     AppTree,
-//     asPath,
-//     err,
-//     query,
-//     pathname,
-//     req,
-//     res,
-//   } = context;
-//   const customerRef: string = process.env.NEXT_PUBLIC_CUSTOMER_REF;
-//   const readonlyCookies: Cookies = NextCookies(context); // Parses Next.js cookies in a universal way (server + client)
-//   const cookiesManager: UniversalCookiesManager = new UniversalCookiesManager(req, res);
-//   const userSession: UserSemiPersistentSession = cookiesManager.getUserData();
-//   const { headers }: IncomingMessage = req;
-//   const publicHeaders = {
-//     'accept-language': get(headers, 'accept-language'),
-//     'user-agent': get(headers, 'user-agent'),
-//     'host': get(headers, 'host'),
-//   };
-//   const hasLocaleFromUrl = !!query?.locale;
-//   const locale: string = hasLocaleFromUrl ? query?.locale as string : DEFAULT_LOCALE; // If the locale isn't found (e.g: 404 page)
-//   const lang: string = locale.split('-')?.[0];
-//   const bestCountryCodes: string[] = [lang, resolveFallbackLanguage(lang)];
-//   const gcmsLocales: string = prepareGraphCMSLocaleHeader(bestCountryCodes);
-//   const defaultLocales: I18nextResources = await fetchTranslations(lang); // Pre-fetches translations from Locize API
-//   const variables = {
-//     customerRef,
-//   };
-//   const queryOptions = {
-//     displayName: 'EXAMPLE_WITH_SSR_QUERY',
-//     query: EXAMPLE_WITH_SSR_QUERY,
-//     variables,
-//     context: {
-//       headers: {
-//         'gcms-locale': gcmsLocales,
-//       },
-//     },
-//   };
-//
-//   const {
-//     data,
-//     errors,
-//     loading,
-//     networkStatus,
-//     stale,
-//   }: ApolloQueryResult<{
-//     customer: Customer;
-//     products: Product[];
-//   }> = await apolloClient.query(queryOptions);
-//
-//   if (errors) {
-//     console.error(errors);
-//     throw new Error('Errors were detected in GraphQL query.');
-//   }
-//
-//   const {
-//     customer,
-//     products,
-//   } = data || {}; // XXX Use empty object as fallback, to avoid app crash when destructuring, if no data is returned
-//
-//   return {
-//     apolloState: apolloClient.cache.extract(),
-//     bestCountryCodes,
-//     customer,
-//     customerRef,
-//     defaultLocales,
-//     headers: publicHeaders,
-//     gcmsLocales,
-//     hasLocaleFromUrl,
-//     isReadyToRender: true,
-//     isServerRendering: true,
-//     lang,
-//     locale,
-//     products,
-//     readonlyCookies,
-//     userSession,
-//   };
-// };
-
 export default (ProductsWithSSRPage);

src/pages/[locale]/pageTemplateSSG.tsx

@@ -54,7 +54,7 @@ const PageTemplateSSG: NextPage<Props> = (props): JSX.Element => {
     >
       <p>
         This page is a template meant to be duplicated to quickly get started with new Next.js <b>SSG pages</b>.<br />
-        It gets common page properties from a default SSG build. Dynamic data (from GraphCMS) are accessible through <code>props.customer</code>.
+        It gets common page properties from a default SSG build. Dynamic data (from Airtable) are accessible through <code>props.customer</code>.
       </p>
       <p>
         Customer label: {customer.label}

src/pages/[locale]/pageTemplateSSR.tsx

@@ -55,9 +55,7 @@ const PageTemplateSSR: NextPage<Props> = (props): JSX.Element => {
     >
       <p>
         This page is a template meant to be duplicated to quickly get started with new Next.js <b>SSR pages</b>.
-        It gets common page properties from a default SSR build. Dynamic data (from GraphCMS) are accessible through <code>props.customer</code>.<br />
-        In order to keep it simple, it fetches <code>LAYOUT_QUERY</code> GraphQL query, which contains the above customer data.<br />
-        Unlike SSG (where you can perform multiple GQL queries without performance concerns because they are executed at build time), SSR should rather only run one GQL query to optimise round trips network calls.
+        It gets common page properties from a default SSR build. Dynamic data (from Airtable) are accessible through <code>props.customer</code> and <code>props.products</code>.<br />
       </p>
       <p>
         Customer label: {customer.label}

src/pages/[locale]/terms.tsx

@@ -106,7 +106,7 @@ const TermsPage: NextPage<Props> = (props): JSX.Element => {
           <hr />
 
           <div className={'source'}>
-            <h2>HTML source code (fetched from GraphQL API), as <code>RichText</code> field:</h2>
+            <h2>HTML source code (fetched from Airtable API), as <code>RichText</code> field:</h2>
             <pre>
               <code>
                 {customer?.terms?.html}

src/utils/i18n/i18nextLocize.ts

@@ -314,7 +314,7 @@ export const fetchTranslations = async (lang: string): Promise<I18nextResources>
 /**
  * Configure i18next with Locize backend.
  *
- * - Initialized with pre-defined "lang" (to make sure GraphCMS and Locize are configured with the same language)
+ * - Initialized with pre-defined "lang"
  * - Initialized with pre-fetched "defaultLocales" (for SSR compatibility)
  * - Fetches translations from Locize backend
  * - Automates the creation of missing translations using "saveMissing: true"
@@ -375,7 +375,7 @@ const createI18nextLocizeInstance = (lang: string, i18nTranslations: I18nextReso
     debug: process.env.NEXT_PUBLIC_APP_STAGE !== 'production' && isBrowser(), // Only enable on non-production stages and only on browser (too much noise on server) XXX Note that missing keys will be created on the server first, so you should enable server logs if you need to debug "saveMissing" feature
     saveMissing: process.env.NEXT_PUBLIC_APP_STAGE === 'development', // Only save missing translations on development environment, to avoid outdated keys to be created from older staging deployments
     saveMissingTo: defaultNamespace,
-    lng: lang, // XXX We don't use the built-in i18next-browser-languageDetector because we have our own way of detecting language, which must behave identically for both GraphCMS I18n and react-I18n
+    lng: lang, // XXX We don't use the built-in i18next-browser-languageDetector because we have our own way of detecting language
     fallbackLng: lang === LANG_FR ? LANG_EN : LANG_FR,
     ns: [defaultNamespace], // string or array of namespaces to load
     defaultNS: defaultNamespace, // default namespace used if not passed to translation function

src/utils/nextjs/SSG.ts

@@ -32,7 +32,7 @@ import { fetchTranslations, I18nextResources } from '../i18n/i18nextLocize';
 export const getCommonStaticPaths: GetStaticPaths<StaticParams> = async (): Promise<StaticPathsOutput> => {
   // TODO Make your own implementation.
   // XXX Having this as separate function helps making your own pages without affecting existing examples under "pages/[locale]/examples".
-  //  For instance, you may want to replace the GraphQL query by your own API query, while keeping the existing example pages working.
+  //  For instance, you may want to replace the Airtable query by your own API query, while keeping the existing example pages working.
   // eslint-disable-next-line @typescript-eslint/no-use-before-define
   return getExamplesCommonStaticPaths();
 };
@@ -56,7 +56,7 @@ export const getCommonStaticPaths: GetStaticPaths<StaticParams> = async (): Prom
 export const getCommonStaticProps: GetStaticProps<SSGPageProps, StaticParams> = async (props: StaticPropsInput): Promise<StaticPropsOutput> => {
   // TODO Make your own implementation.
   // XXX Having this as separate function helps making your own pages without affecting existing examples under "pages/[locale]/examples".
-  //  For instance, you may want to replace the GraphQL query by your own API query, while keeping the existing example pages working.
+  //  For instance, you may want to replace the Airtable query by your own API query, while keeping the existing example pages working.
   // eslint-disable-next-line @typescript-eslint/no-use-before-define
   return getExamplesCommonStaticProps(props);
 };

src/utils/nextjs/SSR.ts

@@ -36,7 +36,7 @@ export type GetCommonServerSidePropsResults = SSRPageProps & {
 export const getCommonServerSideProps = async (context: GetServerSidePropsContext): Promise<GetCommonServerSidePropsResults> => {
   // TODO Make your own implementation.
   // XXX Having this as separate function helps making your own pages without affecting existing examples under "pages/[locale]/examples".
-  //  For instance, you may want to replace the GraphQL query by your own API query, while keeping the existing example pages working.
+  //  For instance, you may want to replace the Airtable query by your own API query, while keeping the existing example pages working.
   // eslint-disable-next-line @typescript-eslint/no-use-before-define
   return getExamplesCommonServerSideProps(context);
 };