Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Graphql, react-apollo how to transfer variable to query at loading component state

I have a simple react component that must load data from server when user ask it. Problem is that i don't know how to transfer dynamic variable speakerUrl and access it in before component load state. Sure i can access it from this.props.params, but component is not loaded and i can't access it when i make a graphql query. Query - QuerySpeaker is working fine when i manualy 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 );
like image 688
SLI Avatar asked Dec 07 '16 20:12

SLI


People also ask

How do you use Apollo Client to fetch data?

Apollo Client provides a fetchMore helper function to assist with paginated queries. It enables you to execute the same query with different values for variables (such as the current cursor). Now we can connect fetchMore to a button within the Launches component that fetches additional launches when it's clicked.

What is __ Typename in GraphQL?

The __typename field returns the object type's name as a String (e.g., Book or Author ). GraphQL clients use an object's __typename for many purposes, such as to determine which type was returned by a field that can return multiple types (i.e., a union or interface).


1 Answers

Based on the react-apollo documentation, the argument passed to the options function is the props object passed to the component. When react-router renders your component, it passes it the params as a prop. That means that params should be a property of the object passed to the options function.

export default graphql(QuerySpeaker, {
  options: (props) => ({ variables: { url: props.match.params.speakerUrl } })
})( SpeakerPage );
like image 50
Paul S Avatar answered Sep 18 '22 01:09

Paul S