title: React useQuery infinite request to server when dockerized
body: <p>I have a React app using apollo-client. My initial query is whether the user is logged in or not and it shows a loading page until server responses so it knows to go to dashboard page or login page. Everything works fine in development, even when I build the project without dockerizing it works just fine but when I use docker, it shows this weird behavior of requesting the initial query over and over. Server responses just fine but useQuery sends another request in an infinite loop.</p>
  <p><strong>Specs:</strong></p>
  <ul>
  <li>react: <code>v17.0.2</code></li>
  <li>apollo-client: <code>v3.5.7</code></li>
  <li>node image: <code>v14.19.1</code></li>
  <li>server: <code>django 3.2</code></li>
  </ul>
  <p>network stats when not using docker:
  <a href="https://i.stack.imgur.com/J1TBQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/J1TBQ.png" alt="enter image description here" /></a></p>
  <p>network stats when using docker:
  <a href="https://i.stack.imgur.com/sKARD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sKARD.png" alt="enter image description here" /></a></p>
  <p>Requests just go on infinitely.</p>
  <p>useQuery code:</p>
  <pre><code>const { loading, error, data } = useQuery(
  gql`
    query {
      # query string
    }
  `,
  {
    skip:
      !performAuthentication ||
      (process.env.NODE_ENV === &quot;development&quot; &amp;&amp;
        process.env.REACT_APP_REMOTE_SERVER === &quot;false&quot;),
  }
  </code></pre>
  <p>);</p>
  <p>the query skips if redux has a user or the env is in development mode while not requesting to server.</p>
  <p>Dockerfile code:</p>
  <pre><code>FROM node:14.19.1
  WORKDIR /app
  COPY package.json ./
  RUN npm install -g express
  RUN npm install
  COPY . ./
  RUN npm run build
  </code></pre>
  <p>jsx uses loading value to show a loading string or its children. since loading is always true it gets stuck in loading string.</p>
  <p>Any thoughts?</p>
  <p><strong>EDIT:</strong>
  context component code:</p>
  <pre><code>const AuthContext = createContext(null);
  
  function AuthProvider({ children }) {
    const authenticationStore = useSelector((state) =&gt; 
    state.authentication);
    const dispatch = useDispatch();
    const navigate = useNavigate();
  
    let performAuthentication = !authenticationStore.isInitialized;
  
    const { loading, error, data } = useQuery(
      gql`
        query {
          # query string
        }
      `,
      {
        skip:
      !performAuthentication ||
      (process.env.NODE_ENV === &quot;development&quot; &amp;&amp;
        process.env.REACT_APP_REMOTE_SERVER === &quot;false&quot;),
      }
    );
  
    useEffect(() =&gt; {
      if (loading === false) {
        if (data) {
          dispatch(
            setUser({
              isInitialized: true,
              isAuthenticated: true,
              user: data.myProfile,
            })
          );
        } else if (error) {
          dispatch(resetUser());
        }
      }
    }, [loading]);
  
    if (
      process.env.NODE_ENV === &quot;development&quot; &amp;&amp;
      process.env.REACT_APP_REMOTE_SERVER === &quot;false&quot; &amp;&amp;
      performAuthentication
    ) {
      dispatch(
        setUser({
          isInitialized: true,
          isAuthenticated: true,
          user: {
            id: 1,
            name: &quot;John Doe&quot;,
            firstName: &quot;John&quot;,
            lastName: &quot;Doe&quot;,
            email: &quot;john@hrm.com&quot;,
          },
        })
      );
    }
  </code></pre>