CODEWITHSUNDEEP
reactjsgraphql-jsreact-apolloapollo-client
CeeceeS
CeeceeS

Reputation: 1

Access a state value to passing it as parameter of a query

I'm having a little problem. Being a beginner in "react apollo ...", I want to pass the value of my state "selectCarcolor" as parameter of my query.This must be done when I select a color from the drop-down list.I read a lot of things in the documentation but I do not know where to start.

You can see all of my code here: Github link description here

onChangeCarColor(e){
  //const selectCarcolor = this.state.selectCarcolor
  this.setState({ selectCarcolor:e.target.value})

  console.log("color " + this.state.selectCarcolor);
}

const Cquery = `gql query getAllUsers($color: String!) { 
  getAllUsers(color: $color) {
    _id
    name 
    cars {
      color 
    } 
  } 
}`;
  
const datafetch = graphql(Cquery, {
  options: props=> ({
    variables: { color: **Here I want to pass the select value**},
  })
});

Hoping for a little help from you.

Thank you guys!

react version :16.2.0 react-apollo version : 2.0.1

Upvotes: 0

Views: 1686

Answers (2)

Yuriy Rypka
Yuriy Rypka

Reputation: 2107

You can wrap your component with withApollo function from react-apollo package which injects the ApolloClient into your component (available as this.props.client). You can send a query using it. Check official docs and this tutorial for more details and explanations.

Example:

import React, { Component } from 'react'
import { withApollo } from 'react-apollo'
import gql from 'graphql-tag'
import Link from './Link'

class Search extends Component {

  state = {
    links: [],
    filter: ''
  }

  render() {
    return (
      <div>
        <div>
          Search
          <input
            type='text'
            onChange={(e) => this.setState({ filter: e.target.value })}
          />
          <button
            onClick={() => this._executeSearch()}
          >
            OK
          </button>
        </div>
        {this.state.links.map((link, index) => <Link key={link.id} link={link} index={index}/>)}
      </div>
    )
  }

  _executeSearch = async () => {
    const { filter } = this.state
    const result = await this.props.client.query({
      query: FEED_SEARCH_QUERY,
      variables: { filter },
    })
    const links = result.data.feed.links
    this.setState({ links })
  }
}

const FEED_SEARCH_QUERY = gql`
  query FeedSearchQuery($filter: String!) {
    feed(filter: $filter) {
      links {
        id
        url
        description
        createdAt
        postedBy {
          id
          name
        }
        votes {
          id
          user {
            id
          }
        }
      }
    }
  }
`

export default withApollo(Search)

Upvotes: 1

Logan Shoemaker
Logan Shoemaker

Reputation: 4457

In your datafetch() function you are setting option variables in a function on props, but you are setting your color selected to your state.

Can you just do 

options: {
  variables: { color: this.state.selectCarcolor, }
}

instead of what you are doing?

Upvotes: 0

Related Questions