Showing
1 changed file
with
50 additions
and
9 deletions
1 | -import React from "react"; | 1 | +import React, { useEffect, useState } from "react"; |
2 | import CategoryPresenter from "./CategoryPresenter"; | 2 | import CategoryPresenter from "./CategoryPresenter"; |
3 | import { withRouter } from "react-router-dom"; | 3 | import { withRouter } from "react-router-dom"; |
4 | import { useQuery } from "@apollo/react-hooks"; | 4 | import { useQuery } from "@apollo/react-hooks"; |
5 | -import { GET_CATEGORIRES } from "./CategoryQueries"; | 5 | +import { |
6 | + GET_CATEGORIRES, | ||
7 | + ADD_CATEGORY, | ||
8 | + SUBSCRIPTION_CATEGORY, | ||
9 | +} from "./CategoryQueries"; | ||
6 | 10 | ||
7 | export default withRouter(({ location }) => { | 11 | export default withRouter(({ location }) => { |
8 | - const { data } = useQuery(GET_CATEGORIRES); | 12 | + const [categoryArr, setCategoryArr] = useState([]); |
9 | - //const [addCategory] = useMutation(ADD_CATEGORY); | 13 | + const { |
10 | - //const [editCategory] = useMutation(EDIT_CATEGORY); | 14 | + subscribeToMore, |
11 | - //const [deleteCategory] = useMutation(DELETE_CATEGORY); | 15 | + data: categoryList, |
16 | + error: categoryQueryError, | ||
17 | + loading: categoryQueryLoading, | ||
18 | + } = useQuery(GET_CATEGORIRES); | ||
19 | + const [addCategory] = useMutation(ADD_CATEGORY); | ||
12 | 20 | ||
13 | let categories; | 21 | let categories; |
14 | - if (data !== undefined) { | 22 | + if (categoryList !== undefined) { |
15 | - const { getCategories } = data; | 23 | + const { getCategories } = categoryList; |
16 | categories = getCategories; | 24 | categories = getCategories; |
17 | } | 25 | } |
18 | 26 | ||
19 | - return <CategoryPresenter location={location} categories={categories} />; | 27 | + useEffect(() => { |
28 | + if (categoryQueryError) { | ||
29 | + console.error(categoryQueryError); | ||
30 | + } | ||
31 | + if (categoryArr) { | ||
32 | + setCategoryArr(categoryArr.getCategories, [ | ||
33 | + categoryQueryError, | ||
34 | + categoryArr, | ||
35 | + ]); | ||
36 | + } | ||
37 | + }, [categoryQueryLoading]); | ||
38 | + | ||
39 | + const subscribeToNewCategory = () => { | ||
40 | + subscribeToMore({ | ||
41 | + document: SUBSCRIPTION_CATEGORY, | ||
42 | + updateQuery: (currentCategories, { subscriptionData }) => { | ||
43 | + if (!subscriptionData.data) return currentCategories; | ||
44 | + const newCategory = subscriptionData.data.subCategory; | ||
45 | + const updateCategory = currentCategories.getCategories.concat( | ||
46 | + newCategory | ||
47 | + ); | ||
48 | + setCategoryArr(updateCategory); | ||
49 | + return { getCategories: updateCategory }; | ||
50 | + }, | ||
51 | + }); | ||
52 | + }; | ||
53 | + | ||
54 | + return ( | ||
55 | + <CategoryPresenter | ||
56 | + location={location} | ||
57 | + categories={categories} | ||
58 | + subscribeToNewCategory={subscribeToNewCategory} | ||
59 | + /> | ||
60 | + ); | ||
20 | }); | 61 | }); | ... | ... |
-
Please register or login to post a comment