cheatcode / nextjs-boilerplate Goto Github PK

This just came up while writing a course for the first time.

Need to add unfreezeApolloCacheValue to the /lib directory to handle Object.freeze and __typename fields when setting Apollo cache values directly on state:

const clearTypenameProperties = (unfrozenValue) => {
  if (unfrozenValue && unfrozenValue.__typename) delete unfrozenValue.__typename; // eslint-disable-line
  if (typeof unfrozenValue === 'object') {
    Object.entries(unfrozenValue).forEach(([key]) => {
      if (unfrozenValue[key] && typeof unfrozenValue[key] === 'object') {
        clearTypenameProperties(unfrozenValue[key]);
      }
    });
  }
};

export default (value) => {
  let unfrozenValue = JSON.parse(JSON.stringify(value));

  if (unfrozenValue instanceof Array) {
    unfrozenValue = unfrozenValue.map(({ __typename, ...rest }) => ({ ...rest }));
  }

  if (unfrozenValue instanceof Object) {
    clearTypenameProperties(unfrozenValue);
  }

  return unfrozenValue;
};

react-i18next is good for this

The formatting of apollo responses is a bit strange. Errors pop out in the response of the .then() callback which you'd expect to come from the .catch().

To buffer this, add a function that handles extraction of error messages and, on success, data from the response without having to rewrite handling code:

export default (options = {}) => {
  if (options.response) {
    if (options.response?.errors?.length > 0 && options.onError) {
      options.onError(options.response.errors[0].message);
    }

    if (!options.response?.errors) {
      const data = options.response?.data[options.queryName];
      options.onSuccess(data || null);
      return data;
    }
  }

  return null;
};

Missing validation.

Would be nice to be able to use it independent of this boilerplate and document it separately.

Had a thought about it and trying to do the CheatCode CSS framework in here right now is going to lower the quality of the project. Would rather make that move later once something is finalized.

The choice of Bootstrap is to stay consistent with @cleverbeagle stuff. Also looking at what's out there, Bootstrap is the best looking when also factoring in syntax choices and adoption.

I'd like to use Tailwind because the design is gorgeous but the non-standard utility class thing isn't something I want to be teaching folks as it deviates significantly from CSS and makes you too dependent on Tailwind.

When you're using getServerSideProps, in order to authenticate a GraphQL request, cookies have to be available. By default the cookies are present but not relayed to Apollo. This can be done by setting the request headers manually, but it involves a good amount of boilerplate.

Need to add a wrapper function that streamlines this so you can choose to either send a normal request or one with cookies (and other headers) passed manually.

Tiny detail but noticing that this naming is helpful when used in conjunction with the structure of the Next.js folder structure.

Would be good to move this off to its own NPM package so it can be used outside of this project. Technically just a vanilla JS library with no dependencies on Next or React.

We need a HOC to handle redirects when authentication state changes. Currently when you log out, the redirect is handled manually or not at all.

Something like this should work:

export default authenticated(SomeComponent)

authenticated will check the authentication state relative to the global store and then decide how to redirect accordingly. We may need to add in an additional "logging in " state to avoid pre-emptive redirects.

Would be good to also consider this for a public(someComponent) HOC to redirect away from public pages when logged in.

Just a way to pull the setting up out of the code (hard to find/discover right now).

This is set to its default value false, not the correct PropType PropTypes.bool.

Describe the bug
When I run npm run build I get this:

> Build error occurred
Error: Build optimization failed: found page without a React Component as default export in 
pages/pong.css

See https://nextjs.org/docs/messages/page-without-valid-component for more info.

The obvious solution is to place pong.css content directly in _app.js, but according to above link, every file that is not exporting React component (export default '') should be placed outside /pages folder.

To Reproduce
Steps to reproduce the behavior:
Run npm run build

Desktop (please complete the following information):

• OS: MacOS 11.4
• Browser Chrome
• Version 90.0.4430.212

Working on a project using this and finding some logs from testing.

Inside the Accounts section of the Readme, there's a link named "CheatCode Node.js Boilerplate" which has a typo on its url, gituhb.com should be github.com.

This should be more elegant. Instead of not rendering (an unsuccessful API connection means the loading state is set in the /pages/_app.js component), some sort of "API not available" banner or message should be presented. Maybe even a fun little popup in the bottom-right corner?

Reference this https://cheatcode.co/tutorials/how-to-generate-a-dynamic-sitemap-with-next-js

Recently I noticed that if you start from scratch with this boilerplate and run npm install or npm update there will be an incompatibility error, which also started bugging me during deployment on Netlify:

12:02:06 AM: npm ERR! code ERESOLVE
12:02:06 AM: npm ERR! ERESOLVE could not resolve
12:02:06 AM: npm ERR!
12:02:06 AM: npm ERR! While resolving: [email protected]
12:02:06 AM: Creating deploy upload records
12:02:06 AM: npm ERR! Found: [email protected]
12:02:06 AM: npm ERR! node_modules/graphql
12:02:06 AM: npm ERR!   graphql@"^16.0.1" from the root project
12:02:06 AM: npm ERR!   peer graphql@"^14.0.0 || ^15.0.0 || ^16.0.0" from @apollo/[email protected]
12:02:06 AM: npm ERR!   node_modules/@apollo/client
12:02:06 AM: Failed during stage 'building site': Build script returned non-zero exit code: 1 (https://ntl.fyi/exit-code-1)
12:02:06 AM: npm ERR!     @apollo/client@"^3.5.5" from the root project
12:02:06 AM: npm ERR!     peer @apollo/client@"^3.2.5" from [email protected]
12:02:06 AM: npm ERR!     node_modules/apollo3-cache-persist
12:02:06 AM: npm ERR!       apollo3-cache-persist@"^0.14.0" from the root project
12:02:06 AM: npm ERR!   2 more (@graphql-typed-document-node/core, graphql-tag)
12:02:06 AM: npm ERR!
12:02:06 AM: npm ERR! Could not resolve dependency:
12:02:06 AM: npm ERR! peer graphql@"^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0" from [email protected]
12:02:06 AM: npm ERR! node_modules/apollo-link-http
12:02:06 AM: npm ERR!   apollo-link-http@"^1.5.17" from the root project
12:02:06 AM: npm ERR!
12:02:06 AM: npm ERR! Conflicting peer dependency: [email protected]
12:02:06 AM: npm ERR! node_modules/graphql
12:02:06 AM: npm ERR!   peer graphql@"^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0" from [email protected]
12:02:06 AM: npm ERR!   node_modules/apollo-link-http
12:02:06 AM: npm ERR!     apollo-link-http@"^1.5.17" from the root project
12:02:06 AM: npm ERR!
12:02:06 AM: npm ERR! Fix the upstream dependency conflict, or retry
12:02:06 AM: npm ERR! this command with --force, or --legacy-peer-deps
12:02:06 AM: npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Forcing it with --force doesn't make sense to me, while --legacy-peer-deps will downgrade graphql package to 15.8.

So I dag deeper and realized that apollo-link-http package is over 2 years old and it's practically not that important because all its functionality is already present in @apollo/client itself.

Solution:

1. Uninstall apollo-link-http
2. Change client.js with the following: import { ApolloClient, ApolloLink, HttpLink, InMemoryCache } from "@apollo/client";, where HttpLink added

Describe the bug
If you manually type /login, /signup, /recover-password in URL address while being authenticated you will be directed to these pages and stay on them without any redirect. this.props.isLoggedIn is undefined in this case in PublicRoute.js.

Same thing works if you click on "Reset Password" in the email let's say for the second time, you also land on /reset-password/token while being authenticated.

Is it because of local state, slow Redux or something else? In Meteor Pup it was easy cause userId was built-in and always there.

To Reproduce
Steps to reproduce the behavior:

1. Go to localhost:5000/documents
2. Type localhost:5000/login in URL

Expected behavior
Redirect to default authenticated page without loading 'Login' page UI

Desktop (please complete the following information):

• OS: MacOS 11.4
• Browser Chrome
• Version 90.0.4430.212