Skip to content

Instantly share code, notes, and snippets.

@jbinto
Created December 20, 2016 21:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jbinto/aaa4b60e7aebb0b4bf98a787e77dac71 to your computer and use it in GitHub Desktop.
Save jbinto/aaa4b60e7aebb0b4bf98a787e77dac71 to your computer and use it in GitHub Desktop.
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