search functionality using relay

10
votes

How to implement a search functionality with relay?

So, the workflow is

  • user navigate to search form.

there should not be any query (as in relay container) when initializing the view.

  • user fills the field values, and press the action/search button.

a relay query is sent to the server

  • results are received from the server.

page displays it and relay reconciles the filtered results with local cache.

I have not seen an example of ad hoc query but only part of a relay container (which it resolves before component initialization). So, how to model it. should it be like a mutation?

2
relayjs
Is something stopping you from just using arguments & variables on a connection ? So every time you want to search, update the initial variables and relay will query the filtered results. - XuoriG
nothing stopping me to do this way, but I thought it will send an initial request when the container initialized. I was thinking more of sending a request only when user initiate action. Will try your suggestion and get back with you. - bsr

2 Answers

13
votes

If I understand correctly you'd like to not send any query at all for the component until the user enters some search text, at which point the query should sent. This can be accomplished with the example posted by @Xuorig, with one addition: use GraphQL's @include directive to skip the fragment until a variable is set. Here's the extended example:

export default Relay.createContainer(Search, {
  initialVariables: {
    count: 3,
    query: null,
    hasQuery: false, // `@include(if: ...)` takes a boolean
  },
  fragments: {
    viewer: () => Relay.QL`
      fragment on Viewer {
        # add `@include` to skip the fragment unless $query/$hasQuery are set
        items(first: $count, query: $query) @include(if: $hasQuery) {
          edges {
            node {
              ...
            }
          }
        }
      }
    `,
  },
});

This query will be skipped initially since the include condition is falsy. Then, the component can call setVariables({query: someQueryText, hasQuery: true}) when text input is changed, at which point the @include condition will become true and the query will be sent to the server.

2
votes

This is the way I've implemented simple search in my project:

export default Relay.createContainer(Search, {
  initialVariables: {
    count: 3,
    title: null,
    category: null,
  },
  fragments: {
    viewer: () => Relay.QL`
      fragment on Viewer {
        items(first: $count, title: $title, category: $category) {
          edges {
            node {
              ...
            }
          }
        }
      }
    `,
  },
});

Your search form simply has to update the initialVariables using this.props.relay.setVariables and relay will query the new data.