10000 Replace redirects with manual broadcastQueries calls · nirus/fullstack-tutorial@4d9e753 · GitHub
[go: up one dir, main page]
Skip to content

Commit 4d9e753

Browse files
hwillsonhwillson
committed
Replace redirects with manual broadcastQueries calls
`@apollo/client@3.0.0-beta.37` supports broadcasting watches from `makeVar`, which means we're getting closer to having `makeVar` changes propagate through the app reactively. Since we're getting closer, we can now call `client.queryManager.broadcastQueries()` manually (instead of doing a redirect), to get the behavior we want. Again, this step is temporary - we'll be able to drop this manual call very soon.
1 parent 54da9aa commit 4d9e753

File tree

3 files changed

+17
-26
lines changed

3 files changed

+17
-26
lines changed

‎final/client/src/containers/book-trips.tsx

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export const BOOK_TRIPS = gql`
2222
interface BookTripsProps extends GetCartItemsTypes.GetCartItems {}
2323

2424
const BookTrips: React.FC<BookTripsProps> = ({ cartItems }) => {
25-
const [bookTrips, { data }] = useMutation<
25+
const [bookTrips, { data, client }] = useMutation<
2626
BookTripsTypes.BookTrips,
2727
BookTripsTypes.BookTripsVariables
2828
>(
@@ -40,13 +40,9 @@ const BookTrips: React.FC<BookTripsProps> = ({ cartItems }) => {
4040
await bookTrips();
4141
cartItemsVar([]);
4242

43-
// TODO: This redirect is temporary. Eventually `makeVar`
44-
// (which is used to create `cartItemsVar`) will broadcast changes
45-
// which will result in the `GET_CART_ITEMS` query in `cart.tsx`
46-
// automatically re-running, and refreshing the app to show the
47-
// cart is empty. For now though, this redirect will force the query
48-
// to re-run and show the empty cart.
49-
window.location.href = '/cart';
43+
// TODO: This is temporary. We're still working on
44+
// the broadcast query side of `makeVar`.
45+
(client as any).queryManager.broadcastQueries();
5046
}}
5147
data-testid="book-button"
5248
>

‎final/client/src/containers/logout-button.tsx

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { isLoggedInVar } from '../cache';
77
import { ReactComponent as ExitIcon } from '../assets/icons/exit.svg';
88

99
const LogoutButton = () => {
10-
const { cache } = useApolloClient();
10+
const client = useApolloClient();
1111
return (
1212
<StyledButton
1313
data-testid="logout-button"
@@ -18,15 +18,15 @@ const LogoutButton = () => {
1818
// query in `profile.tsx`. Then trigger garbage collection using
1919
// `cache.gc()` to remove the cached `User` object that is no longer
2020
// reachable.
21-
cache.modify(
21+
client.cache.modify(
2222
'ROOT_QUERY',
2323
{
2424
me(_, { DELETE }) {
2525
return DELETE;
2626
}
2727
}
2828
);
29-
cache.gc();
29+
client.cache.gc();
3030

3131
// Remove user details from localStorage.
3232
localStorage.clear();
@@ -35,13 +35,9 @@ const LogoutButton = () => {
3535
// state know we're now logged out.
3636
isLoggedInVar(false);
3737

38-
// TODO: This redirect is temporary. Eventually `makeVar`
39-
// (which is used to create `isLoggedInVar`) will broadcast changes
40-
// which will result in the `IS_LOGGED_IN` query in `index.tsx`
41-
// automatically re-running, and refreshing the app to show the login
42-
// screen. For now though, this redirect will force the query to
43-
// re-run and show the login.
44-
window.location.href = '/';
38+
// TODO: This is temporary. We're still working on
39+
// the broadcast query side of `makeVar`.
40+
(client as any).queryManager.broadcastQueries();
4541
}}
4642
>
4743
<ExitIcon />

‎final/client/src/pages/login.tsx

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,21 +15,20 @@ export const LOGIN_USER = gql`
1515
`;
1616

1717
export default function Login() {
18-
const [login, { loading, error }] = useMutation<LoginTypes.login, LoginTypes.loginVariables>(
18+
const [login, { loading, error, client }] = useMutation<
19+
LoginTypes.login,
20+
LoginTypes.loginVariables
21+
>(
1922
LOGIN_USER,
2023
{
2124
onCompleted({ login }) {
2225
localStorage.setItem('token', login.token as string);
2326
localStorage.setItem('userId', login.id as string);
2427
isLoggedInVar(true);
2528

26-
// TODO: This redirect is temporary. Eventually `makeVar`
27-
// (which is used to create `isLoggedInVar`) will broadcast changes
28-
// which will result in the `IS_LOGGED_IN` query in `index.tsx`
29-
// automatically re-running, and refreshing the app to show the user
30-
// is logged in. For now though, this redirect will force the query to
31-
// re-run and show the logged in state.
32-
window.location.href = '/';
29+
// TODO: This is temporary. We're still working on
30+
// the broadcast query side of `makeVar`.
31+
(client as any).queryManager.broadcastQueries();
3332
}
3433
}
3534
);

0 commit comments

Comments
 (0)
0