Comments (5)
Here's my functioning code for a simple boolean value:
const ShowFeedbackModalQuery = gql`
query ShowFeedbackModalQuery {
showFeedbackModal @client
}
`
const resolvers = {
Query: {
showFeedbackModal: () => false,
},
Mutation: {
toggleFeedbackModal: (root, args, { cache }) => {
const { showFeedbackModal } = cache.readQuery({ query: ShowFeedbackModalQuery })
cache.writeQuery({
query: ShowFeedbackModalQuery,
data: { showFeedbackModal: !showFeedbackModal },
})
return !showFeedbackModal
},
},
}
from apollo-link-state.
@carinakoo thanks a lot
This puts my examples for a string and array variable to this much nicer code:
Initiate apollo in index.js:
import { ApolloClient } from 'apollo-client'
import { createHttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { ApolloProvider } from 'react-apollo'
import { concat } from 'apollo-link'
import localStateLink from './localStateLink'
const httpLink = createHttpLink({ uri: 'http://localhost:5000/graphql' })
const client = new ApolloClient({
link: concat(localStateLink, httpLink),
cache: new InMemoryCache(),
})
localStateLink.js:
import { withClientState } from 'apollo-link-state'
import activeNodeArrayGql from './modules/activeNodeArrayGql'
import activeObjectIdGql from './modules/activeObjectIdGql'
export default withClientState({
Query: {
// provide initial state
activeNodeArray: () => [],
activeObjectId: () => null,
},
Mutation: {
// update values in the store on mutations
setActiveNodeArray: (_, { value }, { cache }) => {
cache.writeQuery({
query: activeNodeArrayGql,
data: { activeNodeArray: value },
})
return value
},
setActiveObjectId: (_, { value }, { cache }) => {
cache.writeQuery({
query: activeObjectIdGql,
data: { activeObjectId: value },
})
return value
},
},
})
activeNodeArrayGql.js:
import gql from 'graphql-tag'
export default gql`
query activeNodeArrayQuery {
activeNodeArray @client
}
`
activeObjectIdGql.js:
import gql from 'graphql-tag'
export default gql`
query activeObjectIdQuery {
activeObjectId @client
}
`
Fetching a store variable in a component:
import { graphql } from 'react-apollo'
import compose from 'recompose/compose'
... other imports
import activeNodeArrayGql from '../modules/activeNodeArrayGql'
const activeNodeArrayData = graphql(activeNodeArrayGql, {
name: 'activeNodeArrayData',
})
const enhance = compose(activeNodeArrayData, others)
const MyAppBar = ({
activeNodeArrayData,
...others
}: {
activeNodeArrayData: Object,
...others
}) => {
const { activeNodeArray } = activeNodeArrayData
return (<div>my appbar</div>)
}
export default enhance(MyAppBar)
from apollo-link-state.
Got it:
import { withClientState } from 'apollo-link-state'
import gql from 'graphql-tag'
const activeObjectQuery = gql`
query activeObject {
activeObject @client
}
`
export default withClientState({
Query: {
// provide initial state
activeObject: null,
},
Mutation: {
// update values in the store on mutations
setActiveObject: (_, { id }, { cache }) => {
const data = { activeObject: id }
cache.writeQuery({ query: activeObjectQuery, data })
return null
},
},
})
and:
const activeObjectMutation = gql`
mutation setActiveObject($id: String) {
setActiveObject(id: $id) @client
}
`
app.client.mutate({
mutation: activeObjectMutation,
variables: { id: activeObject.id },
})
from apollo-link-state.
Actually no: Seems that this is not possible: client.readQuery
produces:
Uncaught Error: Can't find field activeObject on object (ROOT_QUERY) undefined
from apollo-link-state.
Finally got it working by using a single value inside an array for every store variable. Not very elegant :-(
Here my code for two store variables:
Initiate apollo in index.js:
import { ApolloClient } from 'apollo-client'
import { createHttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { ApolloProvider } from 'react-apollo'
import { concat } from 'apollo-link'
import localStateLink from './localStateLink'
const httpLink = createHttpLink({ uri: 'http://localhost:5000/graphql' })
const client = new ApolloClient({
link: concat(localStateLink, httpLink),
cache: new InMemoryCache(),
})
localStateLink.js:
import { withClientState } from 'apollo-link-state'
import activeNodeArrayGql from './modules/activeNodeArrayGql'
import activeObjectIdGql from './modules/activeObjectIdGql'
export default withClientState({
Query: {
// provide initial state
activeNodeArray: () => [
{
value: ['Taxonomien'],
__typename: 'ActiveNodeArray',
},
],
activeObjectId: () => [
{
value: null,
__typename: 'ActiveObjectId',
},
],
},
Mutation: {
// update values in the store on mutations
setActiveNodeArray: (_, { value }, { cache }) => {
const data = {
activeNodeArray: [
{
value,
__typename: 'ActiveNodeArray',
},
],
}
cache.writeQuery({ query: activeNodeArrayGql, data })
return null
},
setActiveObjectId: (_, { value }, { cache }) => {
const data = {
activeObjectId: [
{
value,
__typename: 'ActiveObjectId',
},
],
}
cache.writeQuery({ query: activeObjectIdGql, data })
return null
},
},
})
activeNodeArrayGql.js:
import gql from 'graphql-tag'
export default gql`
query activeNodeArray {
activeNodeArray @client {
value
}
}
`
activeObjectIdGql.js:
import gql from 'graphql-tag'
export default gql`
query activeObjectId {
activeObjectId @client {
value
}
}
`
Fetching a store variable using getActiveNodeArray.js
:
import app from 'ampersand-app'
import activeNodeArrayGql from './activeNodeArrayGql'
export default (): Array<string> => {
// at startup client is undefined
if (!app.client) return []
const result = app.client.readQuery({
query: activeNodeArrayGql,
})
const activeNodeArrayDataset = result.activeNodeArray[0]
if (!activeNodeArrayDataset) return []
return activeNodeArrayDataset.value
}
Yuck :-(
activeNodeArray
is the url, activeObjectId
is the id of the object shown in detail view.
I am glad to hear if someone knows a better way to do this.
from apollo-link-state.
Related Issues (20)
- how to query local state by Id HOT 9
- Feature Request: Add an Opt In for using Service Workers or Workers for state management
- How to pass variable from local state HOT 2
- Is clientState.resolvers required or optional?
- Apollo: Problem triggering local state mutation via componentDidMount() HOT 1
- How should I update local state after fetching remote data? HOT 1
- Cannot read property '__typename' of undefined
- Client mutation failed to update (array of objects with different shapes)
- Missing field session in {} HOT 1
- Stupid docs HOT 7
- When calling execute directly on link, resolver cache argument is undefined
- Support for custom scalars
- ⚠️ This project is being deprecated ⚠️ HOT 2
- Store function references?
- Defining fragment properties on resolvers
- How to read Data one object from array of objects from cache. HOT 1
- Slow function call to store
- Not compatible with [email protected]: Cannot find module 'graphql-anywhere/lib/async' HOT 9
- How to let Query componet only fetch cache data only in first time componet building?
- Is it possible to have computed / derived state?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from apollo-link-state.