I am fetching some data using Apollo useQuery in a Profile component which is a parent component.

const { data: postsData, error: postsError } = useQuery(GET_POSTS_FROM_USER, { variables: { userId: userIdFromRouter } })

Inside Profile I have a nav with an option open a dialog to create a new post which sits on top of the component in a modal

{!showPosts ? (<ProfilePageNavHeader currentUser={currentUser.currentUser} userIdFromRouter={userIdFromRouter} />) : null}

ProfilePageNavHeader

        <nav className={profileHeaderStyles.nav}>
          <div>
            <h2>{currentUser.userName}</h2>
          </div>
          <ul>
            <li>
              <MdOutlineAddBox onClick={handleShowNewPostModal} />
            </li>
            <li>
              <FiLogOut onClick={handleUserLogOut} />
            </li>
          </ul>
          {newPostModal ? (
            <FileUpload open={newPostModal} handleClose={handleCloseNewPostModal} />
          ) : null}
        </nav>

  const handleShowNewPostModal = () => {
    setNewPostModal(true);
  };

The problem im having is that everytime handleShowNewPostModal I see the useQuery is refetching. I know there is a skip option but im not sure if this applies to my specific use case, because I need the data to fetch once, but then not fetch again if I am opening that modal, and I need the data that has already been fetched to continue sitting there. Any help woulld be great thanks.