What is the best way to incorporate a state variable into a GraphQL query using Apollo?

My current challenge involves using a state as a variable for my query in order to fetch data from graphQl. However, I'm encountering an issue where the component does not read the state correctly.

Any suggestions on how to solve this?

class usersScreen extends Component {

  constructor(props) {
    super(props);
    var white = 'sdfss';
    console.log(props)
    this.animatedValue = new Animated.Value(0)
    this.state = {
        active : true,
        clientId: "5acc83c4658e6c2c70b3fe1d"
    };
  };

 }
 export default graphql(GET_CLIENT_USERS, {
    options:(state) => (console.log(state),{
    variables:{
        clientId:this.state.clientId}})
 })(usersScreen);

https://i.stack.imgur.com/HOy00.png

Answer №1

If you want to include variables in your component using refetch, you can do so within the componentDidMount method. Instead of passing them as options, you can simply use:

componentDidMount() {
   this.props.data.refetch({clientId:this.state.clientId})
 }

Another approach is to create a new component called ConnectecUsersScreen and pass the state as a prop in the render method of usersScreen:

render() {
    <ConnectecUsersScreen clientId={this.state.clientId} />
  }

By passing ConnectecUsersScreen to graphql, you will now have access to the clientId as props.

Answer №2

Implemented screen Props for transmitting the clientId across all screens within my stack navigation.

render() {
  <ConnectedUsersScreen screenProps={clientId:this.state.clientId} />
 }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to send a variable from a client-side script to a server-side script?

I am facing a challenge in Google App Maker where I am attempting to execute a Client Script to retrieve a variable and then pass that variable to a Server Script for further use. However, I am struggling to figure out the correct implementation. Within m ...

Are you interested in triggering a personalized event when attempting to sort data in Datatables?

Is there a way to trigger my own event without sorting when the user clicks on a column header? I have looked into different methods, but none seem to be suitable for this purpose. Although I can bind to the sort event to perform custom actions, the sorti ...

What is the process for implementing a Content Security Policy to enable the loading of external JS files from a CDN in ExpressJS?

When working with ExpressJS, the HTML file is loaded in the following manner: app.use(express.static(__dirname + '/src/templates/')); Within the HTML file, here is an example of a meta tag containing Content Security Policy: <meta http-equiv= ...

The close button on my modal isn't functioning properly

There seems to be an issue with the close button functionality. <div class="modal fade show " id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" style="display: block;left: -6.5%;"> <div class="modal-dialog" ...

Struggling with a minor glitch in a straightforward coin toss program written in JavaScript

I'm a newcomer to JavaScript programming and I am struggling with understanding how the execution flow is managed. I attempted to integrate an animation from "Animation.css" into a coin toss program, but encountered an issue. When trying to use JavaSc ...

What is the best way to transfer a querystring received in Node.js to a page being shown through res.render?

I have a nodejs file where I am rendering a page named foo.html. Within foo.html, I am using ajax to retrieve variables from a querystring and load an appropriate xml document based on those variables. The issue arises when I run my nodejs server, which is ...

Creating an array based on specific conditions being satisfied (Using Javascript)

I am struggling with a coding problem involving adding users to groups. The goal is to add each user to a group array, with a maximum of 3 users per group. If a group reaches 3 users, it should be moved to another array that collects all the groups. I then ...

Insert the META tag data specific to Facebook Instant Articles directly within the JavaScript code

My website is running on a custom-built CMS provided by a company, and it seems like a modified version of WordPress. They are unwilling to include a basic meta tag in our HTML code. I am looking for guidance on how I can incorporate Facebook's Insta ...

Error in SO Embed Snippet Fiddle due to Bootstrap 4 JS Issue

Just wondering, any idea why the bootstrap 4 js is throwing this error: https://i.sstatic.net/J4Iq4.png when trying to embed the snippet? (No errors in the external Fiddle) Added tether.js but no luck (kept it commented). Switched to jQuery 2.2.1 on th ...

What are the limitations when using React's forwardRef with Material UI's styled components?

While working with forwardRef and styled, I encountered a strange issue : "React Hook ... cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function." Here is an example: import { styled } ...

In what way does this closure cause componentDidUpdate to mimic the behavior of useEffect?

Recently, I came across an insightful article by Dan Abramov titled: A Complete Guide to useEffect. In the section that discusses how Each Render Has Its Own… Everything, two examples were provided. The first example demonstrates the usage of useEffect a ...

tap the hyperlink to complete the form and mimic the action of a designated

I'm working on an HTML form that includes a table and two submit buttons. <input type="image" name="button1" value="First Button" src="some_image.png"> <input type="image" name="button2" value="Second Button" src="some_image.png"> One ch ...

Unable to modify the Jest mock function's behavior

The issue I am facing involves the following steps: Setting up mocks in the beforeEach function Attempting to modify certain mock behaviors in specific tests where uniqueness is required Encountering difficulty in changing the values from the in ...

Exploring the process of querying two tables simultaneously in MySQL using PHP

I currently have a search box in my PHP file that only searches from the "countries" table. However, I also have another table called "continent" and I would like the search box to retrieve results from both the "countries" and "continent" tables. Here is ...

The URL provided for the Ajax HTTP request is not accurate

Consider the following JavaScript code: <script type="text/javascript" charset="utf-8> function goForLogin() { var xmlhttp; xmlhttp=new XMLHttpRequest(); xmlhttp.open("POST","/account/login",true); xmlhttp.s ...

Can you help me figure out how to retrieve the index of a CSS element during a 'click' event?

I have a collection of images all tagged with the class thumb. When a user clicks on one of these images, I need to determine which image was clicked within the array of thumbs. Essentially, I am looking for the index of the clicked image within the thumbs ...

An issue has been identified in the bubble sort algorithm causing certain numerical lists to not be properly sorted when implemented in NodeJS

I am just beginning to learn about algorithms and have started with the bubble sort. I wrote my own implementation and it seems to work well most of the time when sorting a list of numbers from 1 to 100. However, occasionally there is one random number th ...

Ensuring the validity of an HTML form by including onClick functionalities for additional form elements

I am working on a form that I put together using various pieces of code that I found online. My knowledge of HTML and JavaScript is very basic. The form includes a button that, when clicked, will add another set of the same form fields. Initially, I added ...

Locate the word or phrase without a comma

I am currently working on a code that involves finding keys with string values separated by commas. var db = { "name": "Nkosana", "middle": "Baryy", "surname": "walked", "batch_number": "test,b", "temp": ",,67,6,87,86,5,67865,876,67" ...

Incorporating useState into React Native navigation screens to dynamically update FlatList items

I'm working on implementing react-navigation to pass and update useState between screens in order to render a flatlist. The issue I am facing is that the flatlist updates correctly when I navigate back to the previous screen and then return to the com ...