Created
December 20, 2016 21:19
-
-
Save jbinto/aaa4b60e7aebb0b4bf98a787e77dac71 to your computer and use it in GitHub Desktop.
react-apollo stale variables when mixing pollInterval and skip
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import gql from 'graphql-tag' | |
import { graphql } from 'react-apollo' | |
export const QUERY = gql` | |
query($fooID: Int!) { foo(id: $fooID) { id } } | |
` | |
const withFoo = graphql(QUERY, { | |
skip: ownProps => ownProps.active !== true, | |
options: (ownProps) => { | |
console.group('withFoo.options') | |
console.log(' ownProps.fooID', ownProps.fooID) | |
console.groupEnd() | |
return { | |
forceFetch: true, | |
variables: { | |
fooID: ownProps.fooID, | |
}, | |
pollInterval: 2000, | |
} | |
}, | |
props: ({ data }) => { | |
console.log('withFoo.props.data', data) | |
return { | |
foo: data.loading ? 'Loading...' : data.foo.id, | |
} | |
}, | |
}) | |
const App = ({ message, foo, fooID }) => { | |
console.log('App.render: message=', message) | |
return ( | |
<p> | |
message: {message}<br /> | |
fooID prop: {JSON.stringify(fooID)}<br /> | |
graphql result for foo.id: {JSON.stringify(foo)}<br /> | |
</p> | |
) | |
} | |
export default withFoo(App); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import ReactDOM from 'react-dom'; | |
import Foo from './Foo'; | |
import ApolloClient from 'apollo-client' | |
import { ApolloProvider } from 'react-apollo' | |
class MockNetworkInterface { | |
query(request) { | |
console.group('MockNetworkInterface.query') | |
console.log('request.variables', request.variables) | |
console.groupEnd() | |
return new Promise((resolve, reject) => { | |
resolve({ | |
data: { | |
foo: { | |
id: request.variables.fooID, | |
__typename: 'Foo' | |
} | |
} | |
}) | |
}) | |
} | |
} | |
const networkInterface = new MockNetworkInterface() | |
const client = new ApolloClient({ networkInterface }) | |
const render = (attrs) => { | |
ReactDOM.render( | |
<ApolloProvider client={client}> | |
<Foo {...attrs} /> | |
</ApolloProvider>, | |
document.getElementById('root') | |
); | |
} | |
render({ | |
fooID: 1, | |
active: false, | |
message: 'booted, will start polling for id=1 in ~1000ms' | |
}) | |
setTimeout(() => { | |
render({ | |
fooID: 1, | |
active: true, | |
message: 'polling started, will poll for id=1 for ~5000ms' | |
}) | |
}, 1000) | |
setTimeout(() => { | |
render({ | |
fooID: 1, | |
active: false, | |
message: 'polling for id=1 ended, will idle for ~5000ms' | |
}) | |
}, 6000) | |
setTimeout(() => { | |
render({ | |
fooID: 2, | |
active: true, | |
message: 'now polling for id=2 indefinitely (but it doesnt work. it polls for id=1)' | |
}) | |
}, 11000) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment