itgumby / contentful-graphql-react-tutorial Goto Github PK

Contentful’s Getting started with GraphQL

1. exploring endpoints

   • query can have multiple queries, as long as unique lables/alias

   • Contentful has collection filters out-of-box (probably their resolvers)

2. fetching w/ React usestate, useeffect, apollo

   • re-watch and build 1-off react app

   • (deferred) suggestion npm audit fix --force

   • (deferred) understand npm start vs yarn start

   • AJAX/window.fetch(): GET (read) vs POST (write but can also read)

   • useState - add a state variable let [currentVal, setterFn] = useState(initVal)

   • useEffect - synchronize w/ external system (call once per component mount instead of every mutation)

3. refactor React app using env variables

   • in $PROJ_ROOT/.env properties file, REACT_APP_* exposed to process.env to keep secrets out of source (assuming gitignore excludes .env files)

   • moving access_token from query-parameter to request header

4. refactor app with custom hook in react

5. refactor app for error handling (auth, validation)

6. refactor app with React Proptypes, tailwindCSS; add fields to content model

7. refactor app to include image

8. refactor app w/ rich-text

   • markdown URLs are hard-coded ⇒ hard to maintain/brittle

   • field has json, links

   • contentful provides rich-text-react-renderer, rich-text-types to simplify json⇒HTML documentToReactComponents(bio.json)

   • but still a lot of work to convert every HTML element

9. npm install --save @contentful/rich-text-types @contentful/rich-text-react-renderer

10. contentful references (multi ref to string)

11. GraphQL fragments & query complexity - start by using limits on collections

    • fragments '…​${fragName}' (re-use)

    • collections filter/linkedfrom

    • query complexity ⇐ use limit to reduce query cost; errors will share the cost/threshold if too high

12. preview / query variables

    • complexity of targeting preview docs (CPA token vs CDA token)

    • variables can be optional/mandatory/have defaults

13. server directives: conditional queries

14. additional references

    • https://www.contentful.com/developers/docs/references/graphql/ Contentful’s GraphQL API & extensions

    • https://graphql.org/learn/ general GraphQL

    • https://legacy.reactjs.org/docs/getting-started.html https://react.dev/learn to learn more ReactJS

1. Learn GraphQL

2. sign up from blog template

   1. blog template