search functionality using relay

Question

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?

Answer 1

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.

Answer 2

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.