Documentation

Tutorials: Searching the Catalog

The Query & the Provider

The Query

The query is added to the search.graphql file under src > graphql > queries

query search($query: String!, $limit: Int) {
 search(types: [SF, ST], query: $query, pagination: { limit: $limit }) {
   items {
       ... on Station {
        name
         art {
           url (size: WIDTH_90)
         }
       }
       ... on StationFactory {
        name
         art {
           url (size: WIDTH_90)
         }
       }
     }
   }
 }

Notice that a pagination limit is applied to limit the amount of results returned from the query. This query filters the results by Station (ST) and StationFactory (SF) types.  You can use any of the other types listed here, but note that some types cannot be used as playback sources if you’re logged in with a limited subscription tier.  This means that if you are logged in with a Pandora Free subscription, you can search for stations and albums, for example, but only the station results can be used for playback sources. The album results will give an unsupported error if used as playback sources.

The Provider

A provider was created that serves 2 main functions:

• Export the query in order for components to use the query as is.
• Export a function that wraps the component in a higher-order graphql component of Apollo. This higher-order component binds a query to the component supplied and updates the properties of the component reactively as the data of your Apollo store updates.

These exports can be found in this file: src > graphql > search > search.jsx

import { graphql } from 'react-apollo';

import { loader } from 'graphql.macro';
const search = loader('../queries/search.graphql');

const withSearch = (Component, queryProps) => {
 return graphql(search, queryProps)(Component);
}

export { withSearch, search };

In the above code example you will see that the query is imported and loaded with the graphql.macro library. This library compiles GraphQL ASTs at build time using babel macros.

A higher-order component (withSearch) is then created. It takes a component as an argument and returns a new component that wraps the component passed in, in an Apollo graphql component. The graphql component of Apollo reactively updates a Component when data in the Apollo store changes.

The higher-order component and the query is then both exported.