@apollo/client#NetworkStatus JavaScript Examples

The following examples show how to use @apollo/client#NetworkStatus. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: index.js    From realworld with MIT License 6 votes vote down vote up 
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>
  );
}
Example #2
Source File: tag.js    From realworld with MIT License 6 votes vote down vote up 
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>
  );
}
Example #3
Source File: index.js    From realworld with MIT License 5 votes vote down vote up 
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>
  );
}
Example #4
Source File: index.js    From realworld with MIT License 5 votes vote down vote up 
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>
  );
}
Example #5
Source File: index.js    From realworld with MIT License 5 votes vote down vote up 
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>
  );
}
Example #6
Source File: index.js    From realworld with MIT License 5 votes vote down vote up 
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>
  );
}
Example #7
Source File: index.js    From realworld with MIT License 5 votes vote down vote up 
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>
  );
}
Example #8
Source File: index.js    From realworld with MIT License 5 votes vote down vote up 
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>
  );
}
Example #9
Source File: index.js    From realworld with MIT License 5 votes vote down vote up 
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>
  );
}
Example #10
Source File: index.js    From realworld with MIT License 4 votes vote down vote up 
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} />
      ))}
    </>
  );
}