@apollo/client#NetworkStatus JavaScript Examples

function EditorPage() {
  const router = useRouter();
  const page = useQuery(EditorPageQuery, {
    onCompleted: useCallback(
      data => {
        if (data.viewer?.canCreateArticle.value) return;

        router.replace(router.asPath, '/', { shallow: true });
      },
      [router]
    ),
  });
  const [createArticle] = useMutation(EditorPageCreateArticleMutation);

  if (page.networkStatus === NetworkStatus.loading) return null;

  return (
    <Layout {...page.data.viewer}>
      <div className="editor-page">
        <ArticleForm
          onSubmit={(values, { setSubmitting, setStatus }) => {
            createArticle({ variables: values })
              .then(res => {
                router.push(
                  '/article/[slug]',
                  `/article/${res.data.createArticle.article.slug}`
                );
              })
              .catch(err => {
                handleValidationError(err, setStatus);
                console.error(err);
                setSubmitting(false);
              });
          }}
        />
      </div>
    </Layout>
  );
}

export function TagsInputTag({ id, onRemoveTag }) {
  const tagInputTag = useQuery(TagsInputTagQuery, {
    variables: {
      id,
    },
  });

  if (tagInputTag.networkStatus === NetworkStatus.loading) return null;

  return (
    <span className="tag-default tag-pill">
      <i
        className="ion-close-round"
        onClick={() => onRemoveTag(tagInputTag.data.tag)}
      />
      {tagInputTag.data.tag.name}
    </span>
  );
}

function ArticlePage() {
  const router = useRouter();
  const skip = !router.query.slug;
  const page = useQuery(ArticlePageQuery, {
    variables: queryToVariables(router.query),
    skip,
  });

  const [deleteArticle] = useMutation(ArticlePageDeleteArticleMutation);
  const [favoriteArticle] = useMutation(ArticlePageFavoriteArticleMutation);
  const [followUser] = useMutation(ArticlePageFollowUserMutation);
  const [unfavoriteArticle] = useMutation(ArticlePageUnfavoriteArticleMutation);
  const [unfollowUser] = useMutation(ArticlePageUnfollowUserMutation);

  if (page.networkStatus === NetworkStatus.loading || skip) {
    return null;
  }

  return (
    <Layout {...page.data.viewer}>
      <div className="article-page">
        <ArticlePageBanner
          onDelete={deleteArticle}
          onFavorite={favoriteArticle}
          onFollow={followUser}
          onUnfavorite={unfavoriteArticle}
          onUnfollow={unfollowUser}
          {...page.data.article}
        />
        <div className="container page">
          <ArticleContent {...page.data.article} />
          <hr />
          <div className="article-actions">
            <ArticleMeta
              onDelete={deleteArticle}
              onFavorite={favoriteArticle}
              onFollow={followUser}
              onUnfavorite={unfavoriteArticle}
              onUnfollow={unfollowUser}
              {...page.data.article}
            />
          </div>
          <div className="row">
            <div className="col-xs-12 col-md-8 offset-md-2">
              <ArticleComments articleSlug={page.data.article.slug} />
            </div>
          </div>
        </div>
      </div>
    </Layout>
  );
}

function EditorUpdatePage() {
  const router = useRouter();
  const skip = !router.query.slug;
  const page = useQuery(EditorUpdatePageQuery, {
    onCompleted: useCallback(
      data => {
        if (data.article.canUpdate.value) return;

        router.replace(router.asPath, '/', { shallow: true });
      },
      [router]
    ),
    skip,
    variables: queryToVariables(router.query),
  });

  const [updateArticle] = useMutation(EditorUpdatePageUpdateArticleMutation);

  if (page.networkStatus === NetworkStatus.loading || skip) return null;

  return (
    <Layout {...page.data.viewer}>
      <div className="editor-page">
        <ArticleForm
          onSubmit={(values, { setSubmitting, setStatus }) => {
            updateArticle({ variables: values })
              .then(res => {
                router.push(
                  '/article/[slug]',
                  `/article/${res.data.updateArticle.article.slug}`
                );
              })
              .catch(err => {
                handleValidationError(err, setStatus);
                console.error(err);
                setSubmitting(false);
              });
          }}
          {...page.data.article}
        />
      </div>
    </Layout>
  );
}

function FeedPage() {
  const router = useRouter();

  const page = useQuery(FeedPageQuery, {
    onCompleted: useCallback(
      data => {
        if (data.viewer) return;

        router.replace(router.asPath, '/login', { shallow: true });
      },
      [router]
    ),
    notifyOnNetworkStatusChange: true,
    variables: queryToVariables(router.query),
  });

  const [favoriteArticle] = useMutation(FeedPageFavoriteArticleMutation);
  const [unfavoriteArticle] = useMutation(FeedPageUnfavoriteArticleMutation);

  if (page.networkStatus === NetworkStatus.loading) return null;

  return (
    <Layout {...page.data.viewer}>
      <div className="home-page">
        <HomePageBanner />
        <div className="container page">
          <div className="row">
            <div className="col-xs-12 col-md-9">
              <ViewerFeedToggle {...page.data.viewer} />
              {page.data.feedConnection.edges.map(edge => (
                <ArticlePreview
                  key={edge.node.slug}
                  onFavorite={favoriteArticle}
                  onUnfavorite={unfavoriteArticle}
                  {...edge.node}
                />
              ))}
              <Pagination {...page.data.feedConnection.pageInfo} />
            </div>
            <div className="col-xs-12 col-md-3">
              <Sidebar {...page.data} />
            </div>
          </div>
        </div>
      </div>
    </Layout>
  );
}

function IndexPage() {
  const router = useRouter();

  const page = useQuery(IndexPageQuery, {
    notifyOnNetworkStatusChange: true,
    variables: queryToVariables(router.query),
  });

  const [favoriteArticle] = useMutation(IndexPageFavoriteArticleMutation);
  const [unfavoriteArticle] = useMutation(IndexPageUnfavoriteArticleMutation);

  if (page.networkStatus === NetworkStatus.loading) return null;

  return (
    <Layout {...page.data.viewer}>
      <div className="home-page">
        <HomePageBanner />
        <div className="container page">
          <div className="row">
            <div className="col-xs-12 col-md-9">
              <ViewerFeedToggle {...page.data.viewer} />
              {page.data.articlesConnection.edges.map(edge => (
                <ArticlePreview
                  key={edge.node.slug}
                  onFavorite={favoriteArticle}
                  onUnfavorite={unfavoriteArticle}
                  {...edge.node}
                />
              ))}
              <Pagination {...page.data.articlesConnection.pageInfo} />
            </div>
            <div className="col-xs-12 col-md-3">
              <Sidebar {...page.data} />
            </div>
          </div>
        </div>
      </div>
    </Layout>
  );
}

function ProfileFavoritesPage() {
  const router = useRouter();
  const skip = !router.query.username;
  const page = useQuery(ProfileFavoritesPageQuery, {
    variables: queryToVariables(router.query),
    skip,
  });

  const [favoriteArticle] = useMutation(
    ProfileFavoritesPageFavoriteArticleMutation
  );
  const [unfavoriteArticle] = useMutation(
    ProfileFavoritesPageUnfavoriteArticleMutation
  );
  const [followUser] = useMutation(ProfileFavoritesPageFollowUser);
  const [unfollowUser] = useMutation(ProfileFavoritesPageUnfollowUserMutation);

  if (page.networkStatus === NetworkStatus.loading || skip) return null;

  return (
    <Layout {...page.data.viewer}>
      <div className="profile-page">
        <UserPageBanner
          onFollow={followUser}
          onUnfollow={unfollowUser}
          {...page.data.user}
        />
        <div className="container">
          <div className="row">
            <div className="col-xs-12 col-md-10 offset-md-1">
              <UserArticlesToggle {...page.data.user} />
              {page.data.user.favoriteArticlesConnection.edges.length ? (
                page.data.user.favoriteArticlesConnection.edges.map(edge => (
                  <ArticlePreview
                    key={edge.node.slug}
                    onUnfavorite={unfavoriteArticle}
                    onFavorite={favoriteArticle}
                    {...edge.node}
                  />
                ))
              ) : (
                <div className="article-preview">No articles</div>
              )}
            </div>
          </div>
        </div>
      </div>
    </Layout>
  );
}

function ProfilePage() {
  const router = useRouter();
  const skip = !router.query.username;
  const page = useQuery(ProfilePageQuery, {
    variables: queryToVariables(router.query),
    skip,
  });

  const [favoriteArticle] = useMutation(ProfilePageFavoriteArticleMutation);
  const [unfavoriteArticle] = useMutation(ProfilePageUnfavoriteArticleMutation);
  const [followUser] = useMutation(ProfilePageFollowUser);
  const [unfollowUser] = useMutation(ProfilePageUnfollowUserMutation);

  if (page.networkStatus === NetworkStatus.loading || skip) return null;

  return (
    <Layout {...page.data.viewer}>
      <div className="profile-page">
        <UserPageBanner
          onFollow={followUser}
          onUnfollow={unfollowUser}
          {...page.data.user}
        />
        <div className="container">
          <div className="row">
            <div className="col-xs-12 col-md-10 offset-md-1">
              <UserArticlesToggle {...page.data.user} />
              {page.data.user.articlesConnection.edges.length ? (
                page.data.user.articlesConnection.edges.map(edge => (
                  <ArticlePreview
                    key={edge.node.slug}
                    onUnfavorite={unfavoriteArticle}
                    onFavorite={favoriteArticle}
                    {...edge.node}
                  />
                ))
              ) : (
                <div className="article-preview">No articles</div>
              )}
            </div>
          </div>
        </div>
      </div>
    </Layout>
  );
}

function SettingsPage() {
  const router = useRouter();
  const page = useQuery(SettingsPageQuery, {
    onCompleted: useCallback(
      data => {
        if (data.viewer) return;

        router.replace(router.asPath, '/login', { shallow: true });
      },
      [router]
    ),
  });
  const [updateUser] = useMutation(SettingsPageUpdateUserMutation);

  if (page.networkStatus === NetworkStatus.loading) return null;

  return (
    <Layout {...page.data.viewer}>
      <div className="settings-page">
        <UserSettingsForm
          onSubmit={(values, { setSubmitting, setStatus }) => {
            updateUser({ variables: values })
              .then(res => {
                router.push(
                  '/user/[username]',
                  `/user/${res.data.updateUser.user.username}`
                );
              })
              .catch(err => {
                handleValidationError(err, setStatus);
                console.error(err);
                setSubmitting(false);
              });
          }}
          {...page.data.viewer}
        />
      </div>
    </Layout>
  );
}

export function ArticleComments({ articleSlug }) {
  const component = useQuery(ArticleCommentsQuery, {
    variables: {
      slug: articleSlug,
    },
  });

  const [deleteComment] = useMutation(ArticleCommentsDeleteCommentMutation, {
    update(proxy, mutationResult) {
      const commentsList = proxy.readQuery({
        query: ArticleCommentsQuery,
        variables: { slug: articleSlug },
      });

      proxy.writeQuery({
        query: ArticleCommentsQuery,
        variables: { slug: articleSlug },
        data: {
          ...commentsList,
          article: {
            ...commentsList.article,
            comments: [
              ...commentsList.article.comments.filter(
                comment =>
                  comment.id !== mutationResult.data.deleteComment.comment.id
              ),
            ],
          },
        },
      });
    },
  });

  const [createComment] = useMutation(ArticleCommentsCreateCommentMutation, {
    update(proxy, mutationResult) {
      const commentsList = proxy.readQuery({
        query: ArticleCommentsQuery,
        variables: { slug: articleSlug },
      });

      proxy.writeQuery({
        query: ArticleCommentsQuery,
        variables: { slug: articleSlug },
        data: {
          ...commentsList,
          article: {
            ...commentsList.article,
            comments: [
              mutationResult.data.createComment.comment,
              ...commentsList.article.comments,
            ],
          },
        },
      });
    },
  });

  const handleSubmit = (input, { setSubmitting, setStatus, resetForm }) => {
    createComment({
      variables: {
        articleSlug,
        input,
      },
    })
      .then(() => resetForm())
      .catch(err => {
        handleValidationError(err, setStatus);
        console.error(err);
      })
      .finally(() => setSubmitting(false));
  };

  if (component.networkStatus === NetworkStatus.loading) {
    return null;
  }

  return (
    <>
      <UserCommentForm
        canCreateComment={component.data.article.canCreateComment}
        onSubmit={handleSubmit}
        {...component.data.viewer}
      />
      {component.data.article.comments.map(comment => (
        <CommentCard key={comment.id} onDelete={deleteComment} {...comment} />
      ))}
    </>
  );
}