Re-execute Relayjs Query
I'm working on a chat feature on my website which I am developing with Reactjs and Relayjs.
I can successfully query and display the relevant data (chat messages) in my view. However, the view remains static even if the chat partner sends a new message.
I'm looking for ways to implement this, either by checking for database changes or executing the same query on intervals and then fetching the changes, if any.
The relay documentation doesn't seem to describe how to do this. I was first thinking of creating a dummy mutation that doesn't do anything, so that the data is re-fetched which would update the view. However, not only does this seem like a bad implementation, but it would probably not work as the mutation would only return the changes, and not the entire resultset.
I'd rather not use 3rd party libraries, if possible.
Here's my relay container:
export default Relay.createContainer(StartConversationModal, {
prepareVariables() {
return {
limit: 1000,
};
},
fragments: {
conversation: () => Relay.QL`
fragment on Conversation {
id,
title,
type,
conversationDataList(last: $limit) {
edges {
node {
last_read_message_id,
member {
id,
user {
firstname,
lastname
}
}
}
}
},
messageList(last: $limit) {
edges {
node {
id,
message,
sent_on,
member {
id,
role,
user {
firstname,
lastname
}
}
}
}
},
task {
title,
},
${AddMessageMutation.getFragment('conversation')},
}
`,
},
});
Answer
To refetch all the fragments for a container, you can use the imperative forceFetch
API given by RelayContainer, see docs
Basically inside StartConversationModal
you could set up a poller that calls forceFetch
off this.props.relay
. Note that this will refetch the entire connection which might not be what you want, you'd have to experiment with it.
Related Questions
- → Import statement and Babel
- → should I choose reactjs+f7 or f7+vue.js?
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → .tsx webpack compile fails: Unexpected token <
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → React Native with visual studio 2015 IDE
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
- → How do I determine if a new ReactJS session and/or Browser session has started?
- → Alt @decorators in React-Native
- → How to dynamically add class to parent div of focused input field?