title: How to fetch data from Amplify's GraphQL API and store it in a React's context variable
body: <p>I am using React native and I have a context variable <code>post</code>, it has an attribute called <code>name</code> and I have defined a function called <code>onChange</code> to set it.</p>
  <pre class="lang-js prettyprint-override"><code>import React, { useState } from &quot;react&quot;;
  
  const PostContext = React.createContext({
    content: &quot;&quot;,
    onChange: (newPostContent: string) =&gt; {},
  });
  
  export const PostContextProvider = ({ children }) =&gt; {
    const [content, setContent] = useState(&quot;&quot;);
  
    const postChangeHandler = (newPostContent: string) =&gt; {
      setContent(newPostContent);
    };
  
    return (
      &lt;PostContext.Provider
        value={{ content, onChange: postChangeHandler }}
      &gt;
        {children}
      &lt;/PostContext.Provider&gt;
    );
  };
  
  export default PostContext;
  </code></pre>
  <p>Now I have a page on which I want to fetch a post from Amplify's GraphQL API and set its content to my context variable, so I can use it on other pages.</p>
  <pre class="lang-js prettyprint-override"><code>import React, { useEffect, useContext } from &quot;react&quot;;
  import { API, graphqlOperations} from &quot;aws-amplify&quot;;
  
  import PostContext from &quot;./context/post-context&quot;;
  
  const post = useContext(PostContext);
  
  const fetchPost = async () =&gt; {
    const {data: {getPost: { postContent },},} = await API.graphql(
      graphqlOperation(`
        query GetPost {
          getPost(id: &quot;${some post Id}&quot;) {
            content
          }
        }
      `)
      );
  
     post.onChange(postContent)
  }
  
  
  useEffect(()=&gt;{
    fetchPost()
  }, [])
  
  useEffect(()=&gt;{
    console.log(post.content)
  }, [post])
  </code></pre>
  <p>What I expect is that in the async function, the execution is blocked until <code>postContent</code> (because of the <code>await</code> and then it's value is assigned to the context variable, or its update is schedualed (that's why I have also included a <code>useEffect</code> to <code>console.log</code> the value of <code>post.content</code>. But it is not updated and its value remains an empty screen. Can somebody help me with this? I am learning React native how this work, so a detailed answer that lets me know what I am doing wrong is appreciated.</p>