Re-execute relayjs query

Question

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 1

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.