react-apollo stale variables when mixing pollInterval and skip
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); |
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