Skip to content

Commit

Permalink
update-cache
Browse files Browse the repository at this point in the history
  • Loading branch information
benawad committed Aug 17, 2020
1 parent d22b8d2 commit 9645a89
Showing 6 changed files with 111 additions and 13 deletions.
8 changes: 7 additions & 1 deletion web/src/components/EditDeletePostButtons.tsx
Original file line number Diff line number Diff line change
@@ -28,7 +28,13 @@ export const EditDeletePostButtons: React.FC<EditDeletePostButtonsProps> = ({
icon="delete"
aria-label="Delete Post"
onClick={() => {
deletePost({ variables: { id } });
deletePost({
variables: { id },
update: (cache) => {
// Post:77
cache.evict({ id: "Post:" + id });
},
});
}}
/>
</Box>
63 changes: 57 additions & 6 deletions web/src/components/UpdootSection.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,61 @@
import React, { useState } from "react";
import { Flex, IconButton } from "@chakra-ui/core";
import { PostSnippetFragment, useVoteMutation } from "../generated/graphql";
import {
PostSnippetFragment,
useVoteMutation,
VoteMutation,
} from "../generated/graphql";
import gql from "graphql-tag";
import { ApolloCache } from "@apollo/client";

interface UpdootSectionProps {
post: PostSnippetFragment;
}

const updateAfterVote = (
value: number,
postId: number,
cache: ApolloCache<VoteMutation>
) => {
const data = cache.readFragment<{
id: number;
points: number;
voteStatus: number | null;
}>({
id: "Post:" + postId,
fragment: gql`
fragment _ on Post {
id
points
voteStatus
}
`,
});

if (data) {
if (data.voteStatus === value) {
return;
}
const newPoints =
(data.points as number) + (!data.voteStatus ? 1 : 2) * value;
cache.writeFragment({
id: "Post:" + postId,
fragment: gql`
fragment __ on Post {
points
voteStatus
}
`,
data: { points: newPoints, voteStatus: value },
});
}
};

export const UpdootSection: React.FC<UpdootSectionProps> = ({ post }) => {
const [loadingState, setLoadingState] = useState<
"updoot-loading" | "downdoot-loading" | "not-loading"
>("not-loading");
const [, vote] = useVoteMutation();
const [vote] = useVoteMutation();
return (
<Flex direction="column" justifyContent="center" alignItems="center" mr={4}>
<IconButton
@@ -20,8 +65,11 @@ export const UpdootSection: React.FC<UpdootSectionProps> = ({ post }) => {
}
setLoadingState("updoot-loading");
await vote({
postId: post.id,
value: 1,
variables: {
postId: post.id,
value: 1,
},
update: (cache) => updateAfterVote(1, post.id, cache),
});
setLoadingState("not-loading");
}}
@@ -38,8 +86,11 @@ export const UpdootSection: React.FC<UpdootSectionProps> = ({ post }) => {
}
setLoadingState("downdoot-loading");
await vote({
postId: post.id,
value: -1,
variables: {
postId: post.id,
value: -1,
},
update: (cache) => updateAfterVote(-1, post.id, cache),
});
setLoadingState("not-loading");
}}
15 changes: 14 additions & 1 deletion web/src/pages/change-password/[token].tsx
Original file line number Diff line number Diff line change
@@ -5,7 +5,11 @@ import { Formik, Form } from "formik";
import { toErrorMap } from "../../utils/toErrorMap";
import { InputField } from "../../components/InputField";
import { Box, Button, Link, Flex } from "@chakra-ui/core";
import { useChangePasswordMutation } from "../../generated/graphql";
import {
useChangePasswordMutation,
MeDocument,
MeQuery,
} from "../../generated/graphql";
import { useRouter } from "next/router";
import { withUrqlClient } from "next-urql";
import { createUrqlClient } from "../../utils/createUrqlClient";
@@ -29,6 +33,15 @@ const ChangePassword: NextPage = () => {
? router.query.token
: "",
},
update: (cache, { data }) => {
cache.writeQuery<MeQuery>({
query: MeDocument,
data: {
__typename: "Query",
me: data?.changePassword.user,
},
});
},
});
if (response.data?.changePassword.errors) {
const errorMap = toErrorMap(response.data.changePassword.errors);
7 changes: 6 additions & 1 deletion web/src/pages/create-post.tsx
Original file line number Diff line number Diff line change
@@ -19,7 +19,12 @@ const CreatePost: React.FC<{}> = ({}) => {
<Formik
initialValues={{ title: "", text: "" }}
onSubmit={async (values) => {
const { errors } = await createPost({ variables: { input: values } });
const { errors } = await createPost({
variables: { input: values },
update: (cache) => {
cache.evict({ fieldName: "posts:{}" });
},
});
if (!errors) {
router.push("/");
}
16 changes: 14 additions & 2 deletions web/src/pages/login.tsx
Original file line number Diff line number Diff line change
@@ -3,7 +3,7 @@ import { Formik, Form } from "formik";
import { Box, Button, Link, Flex } from "@chakra-ui/core";
import { Wrapper } from "../components/Wrapper";
import { InputField } from "../components/InputField";
import { useLoginMutation } from "../generated/graphql";
import { useLoginMutation, MeQuery, MeDocument } from "../generated/graphql";
import { toErrorMap } from "../utils/toErrorMap";
import { useRouter } from "next/router";
import { withUrqlClient } from "next-urql";
@@ -19,7 +19,19 @@ const Login: React.FC<{}> = ({}) => {
<Formik
initialValues={{ usernameOrEmail: "", password: "" }}
onSubmit={async (values, { setErrors }) => {
const response = await login({ variables: values });
const response = await login({
variables: values,
update: (cache, { data }) => {
cache.writeQuery<MeQuery>({
query: MeDocument,
data: {
__typename: "Query",
me: data?.login.user,
},
});
cache.evict({ fieldName: "posts:{}" });
},
});
if (response.data?.login.errors) {
setErrors(toErrorMap(response.data.login.errors));
} else if (response.data?.login.user) {
15 changes: 13 additions & 2 deletions web/src/pages/register.tsx
Original file line number Diff line number Diff line change
@@ -3,7 +3,7 @@ import { Formik, Form } from "formik";
import { Box, Button } from "@chakra-ui/core";
import { Wrapper } from "../components/Wrapper";
import { InputField } from "../components/InputField";
import { useRegisterMutation } from "../generated/graphql";
import { useRegisterMutation, MeQuery, MeDocument } from "../generated/graphql";
import { toErrorMap } from "../utils/toErrorMap";
import { useRouter } from "next/router";
import { withUrqlClient } from "next-urql";
@@ -20,7 +20,18 @@ const Register: React.FC<registerProps> = ({}) => {
<Formik
initialValues={{ email: "", username: "", password: "" }}
onSubmit={async (values, { setErrors }) => {
const response = await register({ variables: { options: values } });
const response = await register({
variables: { options: values },
update: (cache, { data }) => {
cache.writeQuery<MeQuery>({
query: MeDocument,
data: {
__typename: "Query",
me: data?.register.user,
},
});
},
});
if (response.data?.register.errors) {
setErrors(toErrorMap(response.data.register.errors));
} else if (response.data?.register.user) {

0 comments on commit 9645a89

Please sign in to comment.