wesbos/advanced-react-rerecord

Trying things out. Feel free to follow along

wes bos dot com

This is the codebase behind wesbos.com

advanced-react-rerecord's Issues

Split mutations into their own files

Pagination with cache is still goofy

getting help from the big guns at apollo for this one

Colour coordinate back and frontends

A tweet says to use blue for react and green for node. Good idea.

CORS

This is declared but never used, why?

const cors = {
  origin: '*',
};

I use following script to extend configuration in Express.

module.exports = {
  keystone,
  apps: [
    new GraphQLApp(),
    new AdminUIApp({
      enableDefaultRoute: true,
      authStrategy
    })
  ],
  configureExpress: app => {
    app.use(
      cors({
        origin: "https://example.com/",
        optionsSuccessStatus: 200
      })
    );
  }
};

It's ok?

Any plan to upgrade to prisma 2.0?

Unhandled Runtime Error Error: useKeystone must be called inside a KeystoneProvider component

Hi wes,
I try run your code, but when I try to access one particular user, or products, or roles, etc. Or try add some product... in the admin cmd, I receive this message: useKeystone must be called inside a KeystoneProvider component.
How fix this issue?
I can list all the users, products, etc without problem.
Thank you
\o/

search doesnt work

because of the custom read/merge functionality to enable pagination, the search is now broken.

more info here: https://spectrum.chat/apollo/apollo-client/alias-typepolicies-on-apollo-client-3~ca0a2d94-22cc-4571-a768-384340dd7cee

Apollo 3 isn't launched yet

I don't mind recording in Beta, but I'm not sure the API is 100% finished yet. This is the biggest blocker

upgrade apollo-link-error

Apollo Dev tools aren't available in firefox

Might need to switch back to chrome for the re-record.

Tracking it here: apollographql/apollo-client-devtools#73

Keystone use bcrypt what leads to all kind of install issues on windows...

Just letting you know Windows users will be getting npm/yarn errors like crazy trying to install Bcrypt!
Just trying to install the sick-fits-keystone here and getting a ton of errors and the package install fails on Windows 10.

Investigate hosting next app through Keystone

Hosting:

Digital Ocean with pm2 and Nginx
Heroku

Not sure if Zeit Now will work as they can't really host node apps

Edit needs to work

Migrate react-stripe-checkout to react-stripe-elements & Source to PaymentIntent

Since Stripe has its own prebuilt UI now shouldn't we use https://github.com/stripe/react-stripe-elements/ instead? I see a few advantages here on security and acceptance rate as the elements are good at detecting bad data.

Update: https://stripe.com/docs/sources/cards Card payments with Source (token) is deprecated and no longer recommended.

Replace getInitialProps with getStaticProps or getServerSideProps

In those two files: _document.js and _app.js you're using getInitialProps method. Since version 9.3 Next.js docs recommend using getStaticProps or getServerSideProps instead:

If you're using Next.js 9.3 or newer, we recommend that you use getStaticProps or getServerSideProps instead of getInitialProps.

These new data fetching methods allow you to have a granular choice between static generation and server-side rendering.

Hi Wes, any idea how long until the rerecord will be released?

Just a quick check in, I purchased the original course and have been waiting for the updated version. I have checked back in from time to time and see the rerecord is still listed but haven't heard any news for quite sometime.

Any release dates for the new improved advanced react course?

Bests,

Sean

Custom _document.js to be written with React hooks

Loading queries with Webpack

Feel free to close this issue - just sharing some cool stuff that can be used.

Loading queries with Webpack

That way .graphql files can be imported in the js file and will be already parsed with gql

next.config.js

module.exports = {
  webpack: (config, options) => {
    config.module.rules.push({
      test: /\.(graphql|gql)$/,
      exclude: /node_modules/,
      loader: "graphql-tag/loader"
    });

    return config;
  }
};

Testing

Stick with Enzyme? Or move to react-testing-library?

Any opinions?

Update Edit UI

Can you add setting this up as a PWA in your rerecord?

2020 is over... Any Update

This remake of the course is now officially one year in the making, hope this not is rude but how is it going will we see the new course soon?!

SSR Broken

Currently broken in @apollo/react-srr

Issue to follow:

apollographql/react-apollo#3678 (comment)

Calculation for resetPassword might be off?

Hey Wes,

My math could be off, but shouldn't these lines read:

const now = Date.now();
  const expiry = new Date(user.resetTokenExpiry).getTime();
  if (now - expiry >= 0) { // changed to >= 0
    throw new Error('This token is expired');
  }

Because in the requestReset flow, you set a Date object with an expiry date 1 hour in the future, so you want to check if now has "caught up" and/or passed the expiry time - i.e. if now - expiry is greater than or equal to 0? Otherwise, you allow for now to pass the expiry date by another hour.

advanced-react-rerecord/backend/mutations/resetPassword.js

Line 26 in ae6a83f

if (now - expiry > 3600000) {

Cheers!

Send email in contact form

So far, mail is sent through a Reset mutation. But I want to send mail via contact form, actually I use this:

module.exports = {
  keystone,
  apps: [
    new GraphQLApp(),
    new AdminUIApp({ authStrategy }),
    new NextApp({ dir: "../frontend" })
  ],
  configureExpress: app => {
    app.use(bodyParser.urlencoded({ extended: true }));
    app.use(bodyParser.json());
    app.post("/email", async function(req, res) {
      await transport.sendMail({
        from: "'Mr. Fox 🦊' <[email protected]>",
        to: "[email protected]",
        subject: "Hello World",
        text: "Hello World?",
        html: makeANiceEmail
      }, (error, info) => {
        if (error) {
          return console.log(error);
        }
        console.log("Message sent: %s", info.messageId);
        res.sendStatus(200);
      });
    });
  }
};

but I know that I can use two ways more.
Custom-apps or app-express.

Could someone guide me? What is the best approach for this funcionality?

Recording in Keystone.js 5 or Prisma 2?

Hi, I am going through your Syntax podcast on Keystone again. In the podcast you mentioned that you haven't start recording (blocked by Apollo Client 3 until last week anyway), and you so you haven't decide which to record. You said that it is most probably be Keystone.js (because you ported them in 6 December) but you haven't really decide.

Now that Apollo Client 3 is finally out + Prisma 2.0 is out (not sure if it is a good or bad timing), which one will you record then? And why?

I know there are much work poured into Keystone but is Keystone 5 really the tech stack that will last for years and benefit many people over Prisma 2?

Personally I am okay with both, but I would like to hear your opinion on this.

I never used Keystone.js 5 so I am not sure whether if it is good or not. But I have a very neutral (lots of love but also lots of hate) relationship with Prisma so yeah, just wanna know why for curiosity.

Edit: the link is here https://syntax.fm/show/209/hasty-treat-wes-teaches-scott-about-keystone-js where Wes talks about why he loves Keystone and why it is great. Good to see that he finally decides to use Keystone over Prisma.

Auth needs to be implemented

Update cache and pagination when you Delete an Item

need to hook this up for apollo 3

Deploy two separate apps (frontend and backend)

Client side file upload from app

Items need to be created from the app, not the admin.

From Jess:

The file adapters implement the Apollo Server Upload type (https://www.apollographql.com/docs/apollo-server/data/file-uploads/)
The client needs a combination of the apollo-upload-client package (https://www.npmjs.com/package/apollo-upload-client) and to set the value of the field to a DOM File instance.
Here's an example of setting up the Apollo client to handle file uploads: https://github.com/keystonejs/keystone/blob/master/demo-projects/blog/app/lib/init-apollo.js
And here's an example of setting the file: https://github.com/keystonejs/keystone/blob/master/demo-projects/blog/app/pages/post/new.js (look for the image state variable being set and passed to the mutation)
Apollo GraphQL DocsApollo GraphQL Docs
File uploads
Enabling file uploads in Apollo Server(227 kB)
https://www.apollographql.com/docs/apollo-server/social-cards/file-uploads.png
npmnpm
apollo-upload-client
A terminating Apollo Link for Apollo Client that allows FileList, File, Blob or ReactNativeFile instances within query or mutation variables and sends GraphQL multipart requests.

Request reset shouldn use a date

Next.js now use a public folder!

From Next.js 9.1 Next.js now use a public folder and also support the src folder for a cleaner app structure.

https://nextjs.org/blog/next-9-1

resetPassword needs to be refactored

still prismay

Update Next.js to 9.3

Next.js has introduced some awesome new features in version 9.3 including improved SSG and SSR with getStaticProps and getServerSideProps as well as the new super cool preview mode.

Would be great to show the benefits of them in the course. More details here: https://nextjs.org/blog/next-9-3

Update Cache and pagination logic when you add an item

I have a sneaking suspicion that this wont be easy either. Needs to be added to:

https://github.com/wesbos/advanced-react-rerecord/blob/master/frontend/lib/paginationField.js

SSR

Upgrade to apollo client 3

update query() to executeQuery

Dummy Data

I just want to inject it into the db

→ Tim Leslie 17:06
→ Yes, you can access keystone.adapters.MongooseAdapter.mongoose which is set as this.mongoose = new mongoose.Mongoose();. In general you’d use this in the onConnect config option on the Keystone object.

Remove item from cart

its broken right now. I think this has to do with the Apollo 3 update. I should be able to remove it from the cache optimistically

Use next.js Api or stick with GraphQL Yoga

Hey @wesbos ,
since next.js has the possibility to implement Apis, would you port all the logic from Yoga to the Api?

Need to pass resolveFields to lists.Product.findOne to return product.name

In https://github.com/wesbos/advanced-react-rerecord/blob/master/finished-files/backend/schemas/CartItem.ts, for lists.Product.findOne() to return not only { id } but { id, name } you need to pass resolveFields: 'id, name', as so:

        let product = await lists.Product.findOne({
          where: { id: String(cartItem.product) },
          resolveFields: 'id, name'
        });
        if (product?.name) {

(I just found out by fooling around with Keystone-next, and the code currently never returns product.name, only product.id).

Really looking forward to the course, you're the best!

Account should be able to edit users display name