Skip to content

Commit 084ac3d

Browse files
ascott1ascott1
committed
better caching solution in CRUD chapter
1 parent 419367b commit 084ac3d

19 files changed

Lines changed: 255 additions & 244 deletions

File tree

‎final/components/NoteUser.js‎

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,7 @@ import { Link } from 'react-router-dom';
55

66
import DeleteNote from './DeleteNote';
77
import FavoriteNote from './FavoriteNote';
8-
9-
const GET_ME = gql`
10-
query me {
11-
me {
12-
id
13-
favorites {
14-
id
15-
}
16-
}
17-
}
18-
`;
8+
import { GET_ME } from '../gql/query';
199

2010
const NoteUser = props => {
2111
const { loading, error, data } = useQuery(GET_ME);

‎final/gql/query.js‎

Lines changed: 39 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -20,26 +20,6 @@ const GET_NOTES = gql`
2020
}
2121
`;
2222

23-
const GET_MY_FAVORITES = gql`
24-
query me {
25-
me {
26-
id
27-
username
28-
favorites {
29-
id
30-
createdAt
31-
content
32-
favoriteCount
33-
author {
34-
username
35-
id
36-
avatar
37-
}
38-
}
39-
}
40-
}
41-
`;
42-
4323
const GET_NOTE = gql`
4424
query note($id: ID!) {
4525
note(id: $id) {
@@ -79,10 +59,48 @@ const GET_MY_NOTES = gql`
7959
}
8060
`;
8161

62+
const GET_MY_FAVORITES = gql`
63+
query me {
64+
me {
65+
id
66+
username
67+
favorites {
68+
id
69+
createdAt
70+
content
71+
favoriteCount
72+
author {
73+
username
74+
id
75+
avatar
76+
}
77+
}
78+
}
79+
}
80+
`;
81+
82+
const GET_ME = gql`
83+
query me {
84+
me {
85+
id
86+
favorites {
87+
id
88+
}
89+
}
90+
}
91+
`;
92+
8293
const IS_LOGGED_IN = gql`
8394
{
8495
isLoggedIn @client
8596
}
8697
`;
8798

88-
export { GET_NOTES, GET_MY_FAVORITES, GET_NOTE, GET_MY_NOTES, IS_LOGGED_IN };
99+
export {
100+
GET_NOTES,
101+
GET_NOTE,
102+
GET_MY_NOTES,
103+
GET_MY_FAVORITES,
104+
GET_ME,
105+
IS_LOGGED_IN
106+
};

‎solutions/05-CRUD/components/DeleteNote.js‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,20 @@
11
import React from 'react';
22
import { useMutation } from '@apollo/react-hooks';
3-
import { gql } from 'apollo-boost';
43
import { withRouter } from 'react-router-dom';
54

65
import ButtonAsLink from './ButtonAsLink';
7-
8-
// our delete note mutation
9-
const DELETE_NOTE = gql`
10-
mutation deleteNote($id: ID!) {
11-
deleteNote(id: $id)
12-
}
13-
`;
6+
import { DELETE_NOTE } from '../gql/mutation';
7+
import { GET_MY_NOTES, GET_NOTES } from '../gql/query';
148

159
const DeleteNote = props => {
1610
const [deleteNote] = useMutation(DELETE_NOTE, {
1711
variables: {
1812
id: props.noteId
1913
},
20-
onCompleted: () => {
14+
// refetch the note list queries to update the cache
15+
refetchQueries: [{ query: GET_MY_NOTES, GET_NOTES }],
16+
onCompleted: data => {
17+
// redirect the user to the "my notes" page
2118
props.history.push('/mynotes');
2219
}
2320
});

‎solutions/05-CRUD/components/FavoriteNote.js‎

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,9 @@
11
import React, { useState } from 'react';
22
import { useMutation } from '@apollo/react-hooks';
3-
import { gql } from 'apollo-boost';
43

54
import ButtonAsLink from './ButtonAsLink';
6-
7-
const TOGGLE_FAVORITE = gql`
8-
mutation toggleFavorite($id: ID!) {
9-
toggleFavorite(id: $id) {
10-
id
11-
favoriteCount
12-
}
13-
}
14-
`;
5+
import { TOGGLE_FAVORITE } from '../gql/mutation';
6+
import { GET_MY_FAVORITES } from '../gql/query';
157

168
const FavoriteNote = props => {
179
// store the note's favorite count as state
@@ -26,7 +18,9 @@ const FavoriteNote = props => {
2618
const [toggleFavorite] = useMutation(TOGGLE_FAVORITE, {
2719
variables: {
2820
id: props.noteId
29-
}
21+
},
22+
// refetch the GET_MY_FAVORITES query to update the cache
23+
refetchQueries: [{ query: GET_MY_FAVORITES }]
3024
});
3125

3226
// if the user has favorited the note display the option to remove the favorite
@@ -40,6 +34,7 @@ const FavoriteNote = props => {
4034
setFavorited(false);
4135
setCount(count - 1);
4236
}}
37+
data-cy="favorite"
4338
>
4439
Remove Favorite
4540
</ButtonAsLink>
@@ -50,6 +45,7 @@ const FavoriteNote = props => {
5045
setFavorited(true);
5146
setCount(count + 1);
5247
}}
48+
data-cy="favorite"
5349
>
5450
Add Favorite
5551
</ButtonAsLink>

‎solutions/05-CRUD/components/Header.js‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,10 @@ import React from 'react';
22
import styled from 'styled-components';
33
import logo from '../img/logo.svg';
44
import { useQuery } from '@apollo/react-hooks';
5-
import { gql } from 'apollo-boost';
65
import { Link, withRouter } from 'react-router-dom';
76

87
import ButtonAsLink from './ButtonAsLink';
9-
10-
const IS_LOGGED_IN = gql`
11-
{
12-
isLoggedIn @client
13-
}
14-
`;
8+
import { IS_LOGGED_IN } from '../gql/query';
159

1610
const HeaderBar = styled.header`
1711
width: 100%;

‎solutions/05-CRUD/components/Note.js‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,8 @@ import styled from 'styled-components';
55
import { useQuery } from '@apollo/react-hooks';
66
import { gql } from 'apollo-boost';
77

8-
// import our logged in user UI components
98
import NoteUser from './NoteUser';
10-
11-
// logged in state query
12-
const IS_LOGGED_IN = gql`
13-
{
14-
isLoggedIn @client
15-
}
16-
`;
9+
import { IS_LOGGED_IN } from '../gql/query';
1710

1811
// Keep notes from extending wider than 800px
1912
const StyledNote = styled.article`

‎solutions/05-CRUD/components/NoteFeed.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import Note from './Note';
1414

1515
const NoteFeed = ({ notes }) => {
1616
return (
17-
<div>
17+
<div className="note-feed">
1818
{notes.map(note => (
1919
<NoteWrapper key={note.id}>
2020
<Note note={note} />

‎solutions/05-CRUD/components/NoteUser.js‎

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,7 @@ import { Link } from 'react-router-dom';
55

66
import DeleteNote from './DeleteNote';
77
import FavoriteNote from './FavoriteNote';
8-
9-
const GET_ME = gql`
10-
query me {
11-
me {
12-
id
13-
favorites {
14-
id
15-
}
16-
}
17-
}
18-
`;
8+
import { GET_ME } from '../gql/query';
199

2010
const NoteUser = props => {
2111
const { loading, error, data } = useQuery(GET_ME);

‎solutions/05-CRUD/gql/mutation.js‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import { gql } from 'apollo-boost';
2+
3+
const NEW_NOTE = gql`
4+
mutation newNote($content: String!) {
5+
newNote(content: $content) {
6+
id
7+
content
8+
createdAt
9+
favoriteCount
10+
favoritedBy {
11+
id
12+
username
13+
}
14+
author {
15+
username
16+
id
17+
}
18+
}
19+
}
20+
`;
21+
22+
const EDIT_NOTE = gql`
23+
mutation updateNote($id: ID!, $content: String!) {
24+
updateNote(id: $id, content: $content) {
25+
id
26+
content
27+
createdAt
28+
favoriteCount
29+
favoritedBy {
30+
id
31+
username
32+
}
33+
author {
34+
username
35+
id
36+
}
37+
}
38+
}
39+
`;
40+
41+
const DELETE_NOTE = gql`
42+
mutation deleteNote($id: ID!) {
43+
deleteNote(id: $id)
44+
}
45+
`;
46+
47+
const TOGGLE_FAVORITE = gql`
48+
mutation toggleFavorite($id: ID!) {
49+
toggleFavorite(id: $id) {
50+
id
51+
favoriteCount
52+
}
53+
}
54+
`;
55+
56+
const SIGNIN_USER = gql`
57+
mutation signIn($email: String, $password: String!) {
58+
signIn(email: $email, password: $password)
59+
}
60+
`;
61+
62+
const SIGNUP_USER = gql`
63+
mutation signUp($email: String!, $username: String!, $password: String!) {
64+
signUp(email: $email, username: $username, password: $password)
65+
}
66+
`;
67+
68+
export {
69+
NEW_NOTE,
70+
EDIT_NOTE,
71+
DELETE_NOTE,
72+
TOGGLE_FAVORITE,
73+
SIGNIN_USER,
74+
SIGNUP_USER
75+
};

0 commit comments

Comments
 (0)