Apollo useQuery running twice instead of once when firing multiple queries

Question

in my <Homepage/> component I fetch an authed user and posts using Apollo and useQuery. I can see in my network tab that each one of these queries is running twice instead of once. Which is causing my client to jitter around as the data is loading and setting.

I can't say for sure but I am assuming it has something to do with the chain of events here. I can't figure out how to do this cleanly or why each query is firing twice instead of once. My goal here is to grab everything I need, set the authedUser to a global piece of state so I can access it elsewhere in the app, and only then render the UI with all the appropriate data set in place. Currently, I see the <Spinner/> for a moment, then the data, then the <Spinner/> again, and then finally everything stabilizes.

HOMEPAGE

import React, { useEffect, useState } from 'react';
import { useQuery } from '@apollo/client';
import { GET_ALL_POSTS } from '../utils/queries';
import Post from './Post';
import postStyles from '../styles/home.module.scss';
import NavHeader from './NavHeader';
import NavFooter from './NavFooter';
import { Waypoint } from 'react-waypoint';
import { useAppContext } from '../context';
import { Spinner } from './Spinner';
import { GET_AUTHED_USER } from '../utils/queries';


const HomePage = () => {
  const [state, setState] = useAppContext();

  const [completed, setCompleted] = useState(false);
  const [completedPosts, setCompletedPosts] = useState(false);

  const { data: authedUserData } = useQuery(GET_AUTHED_USER, {
    onCompleted: () => setCompleted(true)
  });

  const { data: postsData, fetchMore, networkStatus } = useQuery(GET_ALL_POSTS, {
    variables: { first: 3 },
    notifyOnNetworkStatusChange: true,
    onCompleted: () => setCompletedPosts(true)
  });

  useEffect(() => {
    if (completed && completedPosts) {
      setState({
        currentUser: authedUserData?.getAuthedUser,
        isAuthed: true
      });
    }
  }, [completed, completedPosts]);

  const fetchMorePosts = () => { // used for infinite scroll
    fetchMore({
      variables: {
        count: postsData.getAllPosts.length,
        first: 3
      },
      updateQuery: (previousValues, { fetchMoreResult }) => {
        if (!fetchMoreResult) {
          return previousValues;
        }
        return {
          ...previousValues,
          getAllPosts: [
            ...previousValues.getAllPosts,
            ...fetchMoreResult.getAllPosts
          ]
        }
      }
    })
  }


  return (
    <div>
      {/*  {state && state.currentUser ? (
        <NavHeader userId={state.currentUser.id} />
    ) : null} */}

      {state && state.currentUser ? (

        <div className={postStyles.homeContainer}>
          <section className={postStyles.posts}>
            {postsData && postsData.getAllPosts.map((post, i) => (
              <React.Fragment key={post.id}>
                <Post post={post} postFromUser={post.postedBy} currentUser={state.currentUser} />

                {i === postsData.getAllPosts.length - 1 &&
                  <Waypoint onEnter={fetchMorePosts} />
                }
              </React.Fragment>
            ))}
            {networkStatus === 3 && <h1>loading more...</h1>}
          </section>
        </div>

      ) : <Spinner />}
      <NavFooter />
    </div>
  )
}


export default HomePage