title: React re-render causing Apollo useQuery to be called twice
body: <p>I have a simple React component that uses Apollo's <code>useQuery</code> to fetch data. The problem is, because the component is being rendered twice, it is calling <code>useQuery</code> twice, which is then calling the Apollo resolver twice, which is then calling the associated function that fetches and returns the data twice, which we can all agree is not great.</p>
  <p>How do I stop the data fetching function from being called multiple times?</p>
  <hr />
  <h3>Project Details</h3>
  <p>A simple <code>console.log</code> statement in the data fetching function is showing that it is getting called twice.</p>
  <pre><code>import { useEffect } from &quot;react&quot;;
  import { useQuery, useMutation, gql } from &quot;@apollo/client&quot;;
  import { Wrapper, Title } from &quot;./App.styles&quot;;
  
  const GET_SIGNALS = gql`
    query {
      charts {
        symbol
        price
      }
    }
  `;
  
  const App = () =&gt; {
    const { loading, error, data } = useQuery(GET_SIGNALS);
  
    if (loading) return &lt;p&gt;Loading...&lt;/p&gt;;
    if (error) return &lt;p&gt;Error...&lt;/p&gt;;
  
    console.log(data);
  
    return (
      &lt;Wrapper&gt;
        &lt;Title&gt;Trend List&lt;/Title&gt;
      &lt;/Wrapper&gt;
    );
  };
  
  export default App;
  </code></pre>
  <p>Here's the Apollo server:</p>
  <pre><code>import { ApolloServer, gql } from &quot;apollo-server-micro&quot;;
  import { getCharts } from &quot;../../src/getCharts&quot;;
  
  const typeDefs = gql`
    type Chart {
      symbol: String
      price: [String]
    }
  
    type Query {
      charts: [Chart]
    }
  `;
  
  const resolvers = {
    Query: {
      charts: () =&gt; getCharts(),
    },
  };
  
  const server = new ApolloServer({ typeDefs, resolvers });
  
  const handler = server.createHandler({ path: &quot;/api/graphql-api&quot; });
  
  export const config = {
    api: {
      bodyParser: false,
    },
  };
  
  export default handler;
  </code></pre>
  <p>The <code>getCharts()</code> functions just returns an object that fits the type definitions.</p>
  <pre><code>export const getCharts = async () =&gt; {
    console.log(&quot;1. Starting getCharts&quot;);
    return [{ symbol: &quot;BTCUSDT&quot;, price: [&quot;1&quot;, &quot;2&quot;, &quot;3&quot;] }];
  };
  </code></pre>
  <p>So the output is:</p>
  <pre><code>1. Starting getCharts
  1. Starting getCharts
  </code></pre>