pub-query checks: mutations and mutations refresh

src/test/pubQuery.tsx

@@ -0,0 +1,145 @@
+import { useState, useEffect } from 'react'
+import reactLogo from './assets/react.svg'
+import viteLogo from '/vite.svg'
+import './App.css'
+import {createBrowserHistory} from 'history';
+import {Router} from 'react-router-dom'
+import {createQueryPub} from './lib/pub';
+
+const history = createBrowserHistory()
+
+//console.log(createQueryPub)
+//
+
+
+//
+//
+const token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOnsiaWQiOiI2NjdmZjBkYTIyMzIxMjBjN2M4NzFmN2MiLCJsb2dpbiI6InRzdDE5IiwiYWNsIjpbIjY2N2ZmMGRhMjIzMjEyMGM3Yzg3MWY3YyIsInVzZXIiXX0sImlhdCI6MTcyMDI1OTEwN30.eDcInxQlskt32LjaCe5sdCcJ3B97BKYZtgUARxThYQM'
+
+console.log(JSON.parse(atob(token.split('.')[1])).sub.id)
+
+const gql = (query, variables={}) => 
+    fetch('http://shop-roles.node.ed.asmer.org.ua/graphql',{
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            Accept: 'application/json',
+            Authorization: 'Bearer ' + token
+        },
+        body: JSON.stringify({query, variables})
+    }).then(res => res.json())
+
+const {queryPub, createQuery, withQueryFunc} = createQueryPub({
+    queryFunc: gql,
+    cacheTimeout: 500000,
+    //hidePendingOnRefresh: false,
+})
+
+
+//queryPub.subscribe(() => console.log(JSON.stringify(queryPub.queries.user, null, 4)))
+
+const {useGoodsQuery} = createQuery({promiseName: 'goods',
+                                     cacheTagsFunc: (payload) => payload.data.GoodFind.map(good => ({type: 'Good', id: good._id}))})
+
+//const {useUserQuery}  = createQuery({
+    //promiseName: 'user',
+    //args: [` 
+        //query user($query: String) {
+            //UserFindOne(query: $query){
+                //_id login nick
+            //}
+        //}
+    //`],
+    //cacheTagsFunc: ({data: {UserFindOne: {_id}}}) => ({_id, type: 'User'})
+//})
+//const userState = useUserQuery({query: JSON.stringify([{_id: '667ff0da2232120c7c871f7c'}])})
+
+//const {useUserQuery} = withQueryFunc(_id => gql(
+   //`query user($query: String) {
+        //UserFindOne(query: $query){
+            //_id login nick
+        //}
+    //}`,
+    //{query: JSON.stringify([{_id}])}
+//))({
+    //promiseName: 'user',
+    //cacheTagsFunc: ({data: {UserFindOne: {_id}}}) => ({_id, type: 'User'})
+//})
+
+
+const {useUserQuery}  = createQuery({
+    promiseName: 'user',
+    args: (_id) =>  [` 
+        query user($query: String) {
+            UserFindOne(query: $query){
+                _id login nick
+            }
+        }
+    `, {query: JSON.stringify([{_id}])}],
+    cacheTagsFunc: ({data: {UserFindOne: {_id}}}) => [{_id, type: 'User'}]
+})
+
+const {useUserMutation} = createQuery({
+    promiseName: 'user',
+    isMutation: true,
+    args: (_id, nick) => [
+        `mutation changeNick($_id:String, $nick:String){
+            UserUpsert(user:{_id:$_id, nick:$nick}){
+                _id nick
+            }
+        }`,
+        {_id, nick}],
+    cacheTagsFunc: ({data: {UserUpsert: {_id}}}) => [{_id, type: 'User'}]
+})
+
+const EditNick = () => {
+    const [nick, setNick] = useState('')
+    const [update, {status, payload, error}] = useUserMutation()
+    console.log(status, payload, error)
+    return (
+        <div>
+            <input type='text' value={nick} onChange={e => setNick(e.target.value)} />
+            <button onClick={() => update('667ff0da2232120c7c871f7c', nick)}>Save</button>
+        </div>
+    )
+}
+
+
+function App() {
+    //const queryState = useGoodsQuery(`query {
+        //GoodFind(query: "[{}]"){
+            //name price _id
+        //}
+    //}`)
+
+
+    const userState = useUserQuery('667ff0da2232120c7c871f7c')
+    console.log(userState)
+
+    const [,setRandomState] = useState<number>()
+
+    useEffect(() => {
+        //setInterval(() => setRandomState(Math.random()), 1000)
+    },[])
+
+    //console.log(queryState)
+
+    //const {status, payload,cacheTags} = queryState
+    //console.log(JSON.stringify(cacheTags))
+    return (
+        <Router history={history}>
+        <EditNick />
+        {userState.status === 'PENDING' && <h1>Loading</h1>}
+        {userState.status === 'FULFILLED' && userState.payload.data.UserFindOne.nick}
+
+
+
+        {/*status === 'PENDING' && <h1>Loading</h1>}
+        {status === 'FULFILLED' && payload.data.GoodFind.map(good => <h2 key={good._id}>{good.name}</h2>) */}
+
+
+        </Router>
+    )
+}
+
+export default App