Using Variables with react-apollo Query

Question

I've attached a query to my React Native component like so:

let getNearbyStoriesQuery = gql`{
  getStoriesNearbyByGeoHash(geoHash: "8k"){
      id
  }
}`;

export default graphql(getNearbyStoriesQuery,
  {
    props: (props) => {
      debugger;
      let storiesNearby = props.data.getStoriesNearbyByGeoHash.map((story) => {
        return {
          id: story.id,
        }
      });
      return {storiesNearby};
    },
    variables: {
      geoHash: mockGeoHash
    }
  })(Home);  // Home is the React Native Component

I'm able to retrieve data from using this technique as long as I hardcode a value in for geoHash in the query; in this case I used "8k". However, when I attempt to modify the query so that I can puss in a variable like so:

let getNearbyStoriesQuery = gql`{
      getStoriesNearbyByGeoHash($geoHash: String!){
          id
      }
    }`;

I get an error saying Expected Name, found $. This method of passing variables to queries is repeated across multiple sources. What am I doing wrong here?

Andreas Köberle · Accepted Answer · 2018-04-15 20:52:02Z

1

Should be:

query GetStoriesNearbyByGeoHash($geoHash: String!) {
    getStoriesNearbyByGeoHash(geoHash: $geoHash){
         id
    }
}

Have a look on how to use variables in graphql: http://graphql.org/learn/queries/#variables

answered Apr 15, 2018 at 20:52

Andreas Köberle

112k58 gold badges281 silver badges308 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

reggie3 Over a year ago

Thanks! This was driving me crazy for a few hours.

Collectives™ on Stack Overflow

Using Variables with react-apollo Query

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related