title: Cannot connect React to Graphene using GraphQL
body: <p>So create graphene query and works on GraphiQL, I'm trying to connect it to react using apollo client but I keep getting error.</p>
  <p>On Django the error is</p>
  <pre><code>graphql.error.located_error.GraphQLLocatedError: 'AnonymousUser' object is not iterable
  </code></pre>
  <p>on React the error is <code>Error! 'AnonymousUser' object is not iterable</code></p>
  <p>As you can see here, it's working on <code>GrahiQL</code></p>
  <p><a href="https://i.stack.imgur.com/6BoRU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6BoRU.png" alt="enter image description here" /></a></p>
  <p>Here is my setup</p>
  <p>URL</p>
  <pre><code> path(&quot;graphql/&quot;, csrf_exempt(GraphQLView.as_view(graphiql=True))),
  </code></pre>
  <p>SETTINGS</p>
  <pre><code>    CORS_ORIGIN_WHITELIST = [
          &quot;http://localhost:3000&quot;,
          &quot;http://127.0.0.1:3000&quot;
      ]
  
      MIDDLEWARE = [
          'corsheaders.middleware.CorsMiddleware',
          'django.middleware.common.CommonMiddleware',
          ....
      ]
  
      INSTALLED_APPS = [
          .....
          &quot;graphene_django&quot;,
          'corsheaders',
      ]
  </code></pre>
  <p>INDEX.JS</p>
  <pre><code>    import React from &quot;react&quot;;
      import { ApolloProvider, ApolloClient, InMemoryCache } from &quot;@apollo/client&quot;;
  
      const client = new ApolloClient({
          uri: &quot;http://localhost:8000/graphql/&quot;,
          cache: new InMemoryCache(),
      });
  
      ReactDOM.render(
          &lt;ApolloProvider client={client}&gt;
              &lt;App /&gt;
          &lt;/ApolloProvider&gt;,
          document.getElementById(&quot;root&quot;)
      );
  </code></pre>
  <p>In EMPLOYEELIST.JS</p>
  <pre><code>    import { useQuery, gql } from &quot;@apollo/client&quot;;
      const EMP = gql`
          query getEmployees {
              allEmployees {
                  id
                  fullName
                  isActive
                  hourlyRate
                  slug
                  paystubData
              }
          }
      `;
      export const ListEmployee = () =&gt; {
          const { loading, error, data } = useQuery(EMP);
          if (loading) return &quot;Loading...&quot;;
          if (error) return `Error! ${error.message}`;
          const [records, setRecords] = useState(data.allEmployees);
          ...
          return(
               .....)
  </code></pre>
  <p>I tested the react component with localstorage first and everything was fine there too, now bring the two together, I'm getting this error. I don't know what I'm missing here really.
  Any help will be appreciated.</p>