Graphql, response-apollo, how to pass a variable to a request when loading component state

Question

I have a simple response component that should download data from the server when the user asks about it. The problem is that I do not know how to pass the dynamic variable speakerUrl and access it in the load state of the component. Of course, I can access it with this.props.params , but the component is not loaded, and I cannot access it when I make a graphql query. Query - QuerySpeaker works fine when I manually set url variable.

router

 <Route path="/speaker/:speakerUrl" component={SpeakerPage} /> 

Component - SpeakerPage

 import React from 'react'; import { graphql } from 'react-apollo'; import { QuerySpeaker } from '../redux/graphql/querys'; class SpeakerPage extends React.Component { render( ) { console.log( this.props ); return ( <div className="ui container"> <div className="ui grid"> <div className="row"> Hello </div> </div> </div> ) } } export default graphql(QuerySpeaker, { options: ({ url }) => ({ variables: { url } }) <- here is my problem, how can i set this url variable? })( SpeakerPage ); 

Answer 1

Based on the react-apollo documentation, the argument passed to the options function is the props passed to the component. When react-router displays your component, it passes its params as a support. This means that params must be a property of the object passed to the options function.

 export default graphql(QuerySpeaker, { options: (props) => ({ variables: { url: props.match.params.speakerUrl } }) })( SpeakerPage );