title: Contentful with React / Redux, best practices for retrieving data
body: <p>I'm using Contentful as a CMS for my personal website built with React / Redux and I'm a little confused on how to deal with the async fetching of data. </p>
  
  <p>For my site, I have a <code>Blog</code> view that lists my <code>BlogPost</code>s and clicking on one would take you to the <code>BlogPost</code> view. In both these components, I want to animate in those elements when they are fetched / loaded.</p>
  
  <p>I have 2 solutions in my head to handle fetching and animating:</p>
  
  <ol>
  <li>My current solution is in the root <code>App.jsx</code> to fetch all the posts from Contentful on <code>componentDidMount()</code> and populate the Redux store key, <code>posts</code>. This will be the only API request to Contentful. Then in the <code>BlogPost</code> component I would handle things like so:</li>
  </ol>
  
  <p>BlogPost.jsx</p>
  
  <pre><code>componentDidMount() {
      if (this.props.posts.length &gt; 0) { this.animateIn() } 
      else { show loading spinner }
  }
  
  componentDidUpdate(nextProps) {
      if (nextProps.posts.length &gt; 0) { this.animateIn() }
  }
  </code></pre>
  
  <p>This way I can handle if the user goes to the BlogPost page from the Blog page or if they refresh on a BlogPost page.</p>
  
  <ol start="2">
  <li>Second solution is one that I'm seeing in several online examples like <a href="https://stackblitz.com/edit/redux-blog?file=components%2Fmodal.js" rel="nofollow noreferrer">this one</a>. Instead of one API request, the example makes multiple requests. So in my <code>BlogPost</code> component, on mount I would make a request to get the specific post and then populate. This way, I don't repeat code in both <code>componentDidUpdate</code> and <code>componentDidMount</code> but it's adding more API calls. </li>
  </ol>
  
  <p>I'm leaning on sticking with my current solution but I was wondering if any experienced Contentful (or really any CMS users) have any opinions on best practices for this situation. </p>