search

EugeneCodeCamp / EugeneCodeCamp.github.io

Website for Eugene Code Camp
1 stars 1 forks source link

Resources from endpoint issue 54 #56

Closed petrazoid closed 4 years ago

petrazoid commented 4 years ago

This addresses https://github.com/EugeneCodeCamp/EugeneCodeCamp.github.io/issues/54

Now, we're pulling the resources in dynamically via graphQl.

I put the query in the asyncData method (https://nuxtjs.org/guide/async-data/) to utilize the built-in server-side rendering, but there are several options. We could pull the resources in on mount, but when I tried that there was a delay using async/await so if we go that route we might want to look into adding a loading icon.

petrazoid commented 4 years ago

I'm a little stuck on this. I just noticed there's an error in the console when I run the current project: "[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside

, or missing . Bailing hydration and performing full client-side render."

I think the code on this PR won't server side render because of that. We should probably fix that warning regardless, I think it might be how data is being passed to the modal component? Not sure. Should I create a bug for that? Should I render the resources in the mount hook for now? @websupergirl

antonioortegajr commented 4 years ago

So this console error doesn't appear in prod build. Just in local dev env. I think the question here is do you try and surpass the error as it is known? Document that this is a quirk in the dev env? Or refactor for this dynamic content?

I would probably push this (error not in prod) and open a new issue around handling dynamic content in general.

Like @petrazoid said there are a lot of options here.

I did have to lintfix however.