<p>Com refs é possível impedir a re-renderização do componente quando for digitado, evitando o uso de estados desnecessários.</p><pre><code class="language-javascript">const App: React.FC = () =&gt; {
  const inputRef = useRef&lt;HTMLInputElement&gt;(null);

  function handleChange() {
    console.log(inputRef.current.value);
  }

  return (
    &lt;input
      type="text"
      onChange={handleChange}
      ref={inputRef}
    /&gt;
  );
};</code></pre><p>Assim, seu componente se torna bem mais performático.</p><p>&nbsp;</p>

Maneira mais performática de capturar o valor de um input no React

<div class="raw-html-embed"><h2 id="config-inicial">Configurando a função para obter os dados com o GraphQL</h2></div><p>Para podermos fazer a paginação, é necessário obter os dados.</p><p>Podemos fazer isso com uma simples função loadPosts.</p><pre><code class="language-javascript">import { request } from 'graphql-request';

export const defaultLoadPostsVariables = {
  sort: 'createdAt:desc',
  start: 0,
  limit: 6,
};

export const loadPosts = async (
  viariables = {},
) =&gt; {
  const data = await request(config.graphqlURL, GRAPHQL_QUERY, {
    ...defaultLoadPostsVariables,
    ...viariables,
  });

  return data;
};</code></pre><p>Nela, nós importamos o ``request`` do graphql-request e passamos 3 argumentos:</p><ol><li>URL</li><li>Query</li><li>Query Variables</li></ol><p>Depois é só retornar os dados obtidos pelo request.</p><p>&nbsp;</p><div class="raw-html-embed"><h2 id="paginacao">Fazendo a paginação</h2></div><div class="raw-html-embed"><h3>Em nossa página do next</h3></div><p>Nós precisamos pegar o valor inicial das Query Variables, que estão sendo passadas na requisição, e repassar para o nosso componente responsável por renderizar a ṕagina.</p><p>Então, no getStaticProps, nos teremos que retornar o seguinte objeto:</p><pre><code class="language-javascript">  return {
    props: {
      posts: data.posts,	
      variables: {
        ...defaultLoadPostsVariables,
      },
    },
  };</code></pre><h3>&nbsp;</h3><div class="raw-html-embed"><h3>Dentro do nosso componente</h3></div><p>No componente, serão necessários 4 estados para controlar a paginação.</p><ol><li>statePosts controlará os posts que estarão sendo mostrados em tela.</li><li>stateVariables será responsável por atualizar o valor de start (Query Variable), que será utilizada na função loadPosts, criada anteriormente, para pegar os próximos posts.</li><li>buttonDisabled irá desabilitar o botão quando não houver mais posts para carregar.</li><li>noMorePosts será utilizado para mostrar uma mensagem quando não houver mais posts para carregar.</li></ol><pre><code class="language-javascript">  // posts e variables vem das props
  const [statePosts, setStatePosts] = useState(posts);
  const [stateVariables, setStateVariables] = useState(variables);
  const [buttonDisabled, setButtonDisabled] = useState(false);
  const [noMorePosts, setNoMorePosts] = useState(false);</code></pre><div class="raw-html-embed"><h3>Função para carregar mais posts</h3></div><p>Com todos os estados criados, vamos começar a construir uma função assíncrona, que nomeei de handleLoadMorePosts, responsável pela paginação.</p><p>Dentro da função, primeiro devemos setar o buttonDisabled como true, para que não seja possível chamar a função novamente enquanto os dados são buscados na API.</p><pre><code class="language-javascript">    setButtonDisabled(true);</code></pre><p>Essa função deverá atualizar a Query Variable start da seguinte forma:</p><ul><li>O start começa em 0 e o seu limite é 6, ou seja, 6 posts serão retornados inicialmente (do index 0 até o 5). Para que os próximos 6 posts sejam carregados, teremos que alterar o valor de start, somando-o com o limite.</li><li>Assim, quando o start for 6, ele trará os itens do index 5 até o index 11, totalizando 6 posts, e assim por diante…</li></ul><pre><code class="language-javascript">    const newVariables = {
      ...stateVariables,
      start: stateVariables.start + stateVariables.limit,
    };</code></pre><p>Com o valor de start atualizado, deveremos passá-lo para a função loadPosts, fazendo uma nova requisição que não retornará os posts anteriores, e sim apenas os posts a partir do valor do start.</p><pre><code class="language-javascript">    const morePosts = await loadPosts(newVariables);</code></pre><p>Com os dados da requisição em mãos, faremos uma verificação para saber se algum post foi retornado. Se não foi retornado, significa que todos os posts já foram carregados, então colocamos o estado noMorePosts como true e retornamos para que a execução da função acabe ali.</p><pre><code class="language-javascript">    if (!morePosts || !morePosts.posts || !morePosts.posts.length) {
      setNoMorePosts(true);
      return;
    }</code></pre><p>Se passar da verificação significa que temos posts para carregar. Então, voltamos o buttonDisabled para false, atualizamos o valor do stateVariables - com o start modificado - e finalmente alteramos o statePosts, mesclando os posts já existentes com os posts retornados da API.</p><pre><code class="language-javascript">    setButtonDisabled(false);
    setStateVariables(newVariables);
    // Passo uma função de callback no useState para pegar o valor atual do estado.
    // Com esse valor, faço um spread para mesclar os posts já existentes com
    // os posts novos que chegaram.
    setStatePosts((p) =&gt; [...p, ...morePosts.posts]);</code></pre><h4>Construindo a interface do componente</h4><p>Pronto! Agora que já possuímos os dados, falta apenas colocá-los em tela. Então, nosso componente deve retornar algo parecido com este trecho de código:&nbsp;</p><pre><code class="language-javascript">  return (
    &lt;Posts&gt;
    // Repare que eu não repasso os posts recebidos via props
    // e sim os posts que foram mesclados.
      &lt;PostGrid posts={statePosts} /&gt;

      &lt;ButtonContainer&gt;
      // Verifico se possui algum post no array de posts. Se não possuir,
      // retorno uma mensagem informando que não há posts
        {statePosts.length &gt; 0 &amp;&amp; (
          &lt;Button
            onClick={handleLoadMorePosts}
            disabled={buttonDisabled}
          &gt;
            {noMorePosts ? 'Sem mais posts' : ' Carregar mais'}
          &lt;/Button&gt;
        )}
      &lt;/ButtonContainer&gt;
      
    &lt;/Posts&gt;
  );</code></pre><div class="raw-html-embed"><h2 id="resultado">Resultado final</h2></div><p>Por fim, o código de nossa página ficará assim:</p><pre><code class="language-javascript">export default function Posts({ posts = [], variables }) {

  const [statePosts, setStatePosts] = useState(posts);
  const [stateVariables, setStateVariables] = useState(variables);
  const [buttonDisabled, setButtonDisabled] = useState(false);
  const [noMorePosts, setNoMorePosts] = useState(false);

  const handleLoadMorePosts = async () =&gt; {
    setButtonDisabled(true);

    const newVariables = {
      ...stateVariables,
      start: stateVariables.start + stateVariables.limit,
    };

    const morePosts = await loadPosts(newVariables);

    if (!morePosts || !morePosts.posts || !morePosts.posts.length) {
      setNoMorePosts(true);
      return;
    }

    setButtonDisabled(false);
    setStateVariables(newVariables);
    setStatePosts((p) =&gt; [...p, ...morePosts.posts]);
  };

  return (
    &lt;Posts&gt;
      &lt;PostGrid posts={statePosts} /&gt;

      &lt;ButtonContainer&gt;
        {statePosts.length &gt; 0 &amp;&amp; (
          &lt;Button
            onClick={handleLoadMorePosts}
            disabled={buttonDisabled}
          &gt;
            {noMorePosts ? 'Sem mais posts' : ' Carregar mais'}
          &lt;/Button&gt;
        )}
      &lt;/ButtonContainer&gt;
      
    &lt;/Posts&gt;
  );
};

export const getStaticProps = async () =&gt; {
  let data = null;

  try {
    data = await loadPosts();
  } catch (error) {
    data = null;
  }

  if (!data || !data.posts || !data.posts.length) {
    return {
      notFound: true,
    };
  }

  return {
    props: {
      posts: data.posts,
      variables: {
        ...defaultLoadPostsVariables,
      },
    },
  };
};</code></pre><p>&nbsp;</p><p>&nbsp;</p>

Paginação em página estática do Next com GraphQL

<div class="raw-html-embed"><p>Nostro <strong>definitiones</strong> (<i>React</i>) sed cu - <u>Morrice</u>. Sea <code>useEffect</code>, useState dicat fabulas <a href="https://gist.github.com/luizomf/e7cf0c3d172801225cce694681ecb0ad">consetetur</a> no, odio deseruisse assueverit mei eu, vis probo nonumes molestie id. Ipsum movet liberavisse an mea, diceret vituperata ne his, delenit apeirian quo ea. Imperdiet percipitur te eos. Per ludus aliquam cu. <a href="https://gist.github.com/luizomf/e7cf0c3d172801225cce694681ecb0ad">Eos ex tincidunt necessitatibus, timeam theophrastus mel cu</a>. La.</p>
<h1>Tincidunt necessitatibus, timeam theophrastus mel cu</h1>
<h2>Tincidunt necessitatibus, timeam theophrastus mel cu</h2>
<h3>Tincidunt necessitatibus, timeam theophrastus mel cu</h3>
<h4>Tincidunt necessitatibus, timeam theophrastus mel cu</h4>
<h5>Tincidunt necessitatibus, timeam theophrastus mel cu</h5>
<h6>Tincidunt necessitatibus, timeam theophrastus mel cu</h6>
<pre><code class="language-plaintext">import { HtmlContent } from '../HtmlContent';
import * as Styled from './styles';
export type FooterProps = {
  footerHtml: string;
};
export const Footer = ({ footerHtml }: FooterProps) =&gt; {
  return (
    &lt;Styled.Container&gt;
      &lt;HtmlContent html={footerHtml} /&gt;
    &lt;/Styled.Container&gt;
  );
};
</code></pre>
<p>Qui eu <i>mutat</i> exerci <span style="background-color:hsl(60,75%,60%);">dolores</span>, his no <span style="color:hsl(270,75%,60%);">repudiare</span> constituam <s>accommodare</s>, vis ea sint <u>tempor</u> eirmod. In mei eruditi moderatius, ex per iudico essent repudiandae. In vis vidisse menandri, an has repudiare disputationi delicatissimi. In has wisi justo postulant. Ei viderer ornatus mel, usu an partiendo tincidunt, ea eum brute ullamcorper.</p><p>10<sup>2</sup>*5<sup>2</sup> - H<sub>2</sub>0</p><p style="text-align:center;"><strong>Center: </strong>Abhorreant reformidans eum an, per equidem repudiandae no, ex cum elitr argumentum persequeris. In eam consul theophrastus delicatissimi, lobortis rationibus efficiendi mea ei, nam natum dolore scripserit ea. Sit partiendo eloquentiam ne. Sea no autem dolores, ridens gloriatur mel cu. Munere nullam epicuri his id, dicam definiebas deterruisset eu vim. Ea veritus deleniti usu, nam ei idque choro volumus, ex nisl aliquam bonorum eam.</p><p>Fugit aliquip erroribus eu eam, an mel vidit doctus. Vis nobis veritus maluisset id, nonumy adversarium neglegentur est ut. Tation persius pri eu, modo minim fastidii mei no. Ad tota pertinax definiebas eam.</p><p style="text-align:right;"><strong>Right:</strong> Mel in lorem feugiat, tation dolore et eum. Id has utamur albucius molestiae. Dico justo maiestatis ei mei, labitur laboramus voluptatum nam ut. Saperet propriae nec an.</p><p>Quod oblique mei ne, cetero delicatissimi sea cu, cu est harum dicit verterem. Tota forensibus ut usu, luptatum dignissim persecuti vel ex. Mea nostrud instructior cu, et referrentur theophrastus eum. Pro in iuvaret senserit. In persius explicari conceptam nec, in populo ponderum consequat vis. Gloriatur conclusionemque no qui, vitae nominati nec te, laoreet torquatos accommodare ex qui. Eu natum mediocritatem eos, cum ex alia oportere.</p><p style="text-align:justify;"><strong>Justify:</strong> Cu vis nonumes petentium disputationi, invidunt aliquando ex ius, ocurreret suscipiantur conclusionemque eu qui. Probo nemore ut est. Et eam dicta oratio eligendi. Quem dicta dolore vel et, at reque gloriatur definitionem sed.</p><p>Nec simul ullamcorper at. Mea possit dolores persecuti te, ei quidam apeirian quo. Has quas corpora ne. Ius ad malis iusto delenit, sit ferri idque ex.</p><blockquote><p>Blockquote: Et sed legere rationibus, vitae evertitur ad eam. Eu amet vero officiis vis. Ad nullam pericula neglegentur sit, vix ei regione legendos argumentum. Mei an quas convenire, nobis dicunt mei ut. Pro no debet referrentur, ei est falli libris. Eu per summo salutandi hendrerit, salutatus democritum interesset nec ut. Wisi lobortis incorrupte ei mea, explicari interpretaris has et.</p></blockquote><p>A new line:</p><hr><p>Now keep going…</p><figure class="image"><a href="https://gist.github.com/luizomf/e7cf0c3d172801225cce694681ecb0ad"><img src="https://res.cloudinary.com/dlizakp2a/image/upload/v1614696630/Frozen_sunset_on_the_lake_by_Manuel_Arslanyan_9f9cd8ea10.jpg" alt="O alt text da imagem"></a><figcaption>Aqui está uma imagem</figcaption></figure><p>Munere euripidis an sed, usu ne consul soluta utamur. Bonorum equidem placerat eu cum, tantas quidam duo et. Pro soleat quaestio ne, ut nam wisi vocibus inciderint, ex his maiorum mnesarchum. Et est wisi primis, id vel odio alienum voluptatibus. Veri doctus offendit vim ea. Has nemore prompta inciderint ei, no sea expetendis dissentiet. Copiosae delicatissimi an sea, id cum agam clita nostro, tale tincidunt delicatissimi ei eos.</p><figure class="image image-style-side"><img src="https://res.cloudinary.com/dlizakp2a/image/upload/v1614696630/Frozen_sunset_on_the_lake_by_Manuel_Arslanyan_9f9cd8ea10.jpg" alt="Uma imagem à direita"><figcaption>Uma imagem à direita</figcaption></figure><p>Munere euripidis an sed, usu ne consul soluta utamur. Bonorum equidem placerat eu cum, tantas quidam duo et. Pro soleat quaestio ne, ut nam wisi vocibus inciderint, ex his maiorum mnesarchum. Et est wisi primis, id vel odio alienum voluptatibus. Veri doctus offendit vim ea. Has nemore prompta inciderint ei, no sea expetendis dissentiet. Copiosae delicatissimi an sea, id cum agam clita nostro, tale tincidunt delicatissimi ei eos.</p><p>Munere euripidis an sed, usu ne consul soluta utamur. Bonorum equidem placerat eu cum, tantas quidam duo et. Pro soleat quaestio ne, ut nam wisi vocibus inciderint, ex his maiorum mnesarchum. Et est wisi primis, id vel odio alienum voluptatibus. Veri doctus offendit vim ea. Has nemore prompta inciderint ei, no sea expetendis dissentiet. Copiosae delicatissimi an sea, id cum agam clita nostro, tale tincidunt delicatissimi ei eos.</p><p>Solum consul scripserit in duo, an sit postea denique percipit. Facer ignota consequat nec ei, idque etiam corrumpit sit ut. In mucius definitionem quo, vis an nisl diam appellantur, hendrerit comprehensam ea per. Vix saepe fierent ut.</p><p>Cu mei summo copiosae. Et vim quaestio partiendo. Quot praesent imperdiet at duo. Sit probo causae ei. Ad ius nemore eruditi.</p><p>Mei in qualisque disputando. Adipisci philosophia et sed, mel diceret patrioque sententiae ea, iriure posidonium consectetuer ad eam. Nobis reprimique duo in, eam corpora mandamus ex. In quod euismod eum, ne habemus cotidieque necessitatibus cum. Liber recteque duo no, ludus reprehendunt has an.</p><p>Solum consul scripserit in duo, an sit postea denique percipit. Facer ignota consequat nec ei, idque etiam corrumpit sit ut. In mucius definitionem quo, vis an nisl diam appellantur, hendrerit comprehensam ea per. Vix saepe fierent ut.</p><p>Cu mei summo copiosae. Et vim quaestio partiendo. Quot praesent imperdiet at duo. Sit probo causae ei. Ad ius nemore eruditi.</p><p>Mei in qualisque disputando. Adipisci philosophia et sed, mel diceret patrioque sententiae ea, iriure posidonium consectetuer ad eam. Nobis reprimique duo in, eam corpora mandamus ex. In quod euismod eum, ne habemus cotidieque necessitatibus cum. Liber recteque duo no, ludus reprehendunt has an.</p><p>Bullet:</p><ul><li>Mei in qualisque disputando. Adipisci philosophia et sed, mel diceret patrioque sententiae ea, iriure posidonium consectetuer ad eam. Nobis reprimique duo in, eam corpora mandamus ex. In quod euismod eum, ne habemus cotidieque necessitatibus cum. Liber recteque duo no, ludus reprehendunt has an.</li><li>iriure posidonium consectetuer ad eam.</li><li>Nobis reprimique duo in, eam corpora mandamus</li><li>ex. In</li><li>quod euismod</li><li>eum, ne habemus cotidieque necessitatibus cum.</li><li>Liber recteque duo no, ludus reprehendunt has an.</li></ul><p>Now ordered:</p><ol><li>Item 1</li><li>Item</li><li>Item</li><li>Item</li></ol><p>A think that's it…</p><figure class="table"><table><thead><tr><th>Title 1</th><th>Title 1</th><th>Title 1</th><th>Title 1</th><th>Title 1</th><th>Title 1</th><th>Title 1</th><th>Title 1</th><th>Title 1</th><th>Title 1</th></tr></thead><tbody><tr><td>Item</td><td>Item</td><td>Item</td><td>Item</td><td>Item</td><td>Item</td><td>Item</td><td>Item</td><td>Item</td><td>Item</td></tr><tr><td>Item</td><td>Item</td><td>Item</td><td>Item</td><td>Item</td><td>Item</td><td>Item</td><td>Item</td><td>Item</td><td>Item</td></tr><tr><td>Item</td><td>Item</td><td>Item</td><td>Item</td><td>Item</td><td>Item</td><td>Item</td><td>Item</td><td>Item</td><td>Item</td></tr></tbody></table></figure><p>A video:</p><figure class="media"><oembed url="https://www.youtube.com/watch?v=oLmRV25eQvo"></oembed></figure><p>The end.</p>
</div>

Teste

<p>No Next, se a página possuir rotas dinâmicas e usar getStaticProps, será necessário utilizar o getStaticPaths. Por que isso?</p><div class="raw-html-embed"><h2 id="entendendo-funcionamento">Entendendo o funcionamento</h2></div><p>O getStaticPaths vai tentar buscar quais rotas existem para mapeá-los. Esse mapeamento vai ser utilizado pelo getStaticProps na hora da build, ou seja, vai ser feito um pre-render de todas as rotas mapeadas.</p><p><span style="color:hsl(0,0%,60%);">A propriedade "paths" determina quais caminhos serão pre-renderizados pelo getStaticProps.</span></p><p>&nbsp;</p><div class="raw-html-embed"><h2 id="fallback">Fallback</h2></div><p>Quando uma rota dinâmica é acessada e ela não está na lista de pre-renderizadas, existem duas opções:</p><p>&nbsp;</p><div class="raw-html-embed"><h3>Fallback: false</h3></div><p>Você retorna 404 direto.&nbsp;</p><pre><code class="language-javascript">// pages/posts/[id].js

function Post({ post }) {

  // Render post...

}

// Esta função será chamada no momento da build

export async function getStaticPaths() {

  // Requisição para obter os posts

  const res = await fetch('https://.../posts');

  const posts = await res.json();

  // Pega os caminhos dos posts que serão pre-renderizados

  const paths = posts.map((post) =&gt; ({

    params: { id: post.id },

  }));

  // Apenas os posts presentes no array de paths serão pre-renderizados
  // no momento da build.

  // { fallback: false } os posts que não estão mapeados, ou seja, não 
  // foram pre-renderizados, retornarão 404 ao serem acessados.

  return { paths, fallback: false };

}

// Esta função também será chamada na build.

export async function getStaticProps({ params }) {

  // params contém o `id` do post.

  // Se a rota  for /posts/1, então params.id é 1

  const res = await fetch(`https://.../posts/${params.id}`);

  const post = await res.json();

  // Passa os dados do post para página via props

  return { props: { post } };

}

export default Post;</code></pre><h4>&nbsp;</h4><div class="raw-html-embed"><h3>Fallback: true</h3></div><p>O next vai gerar estaticamente o HTML da página, isso inclui executar o getStaticProps. Na execução do StaticProps, você pode usar uma verificação para saber se algum dado foi retornado da API, e então retornar 404 ou não.</p><pre><code class="language-javascript">export default function Post({ posts }) {
  const router = useRouter();

  // Se a página não estiver pre-renderizada, ela vai cair no fall back e 
  // mostrar o componente de loading. Ao mesmo tempo, no background, a
  // função getStaticProps estará sendo executada.
  if (router.isFallback) return &lt;h1&gt;Carregando ...&lt;/h1&gt;;

  return (
  // Render post...
  );
}

export const getStaticPaths = async () =&gt; {
  return {
    // Todas as rotas cairão no fallback
    paths: [],
    fallback: true,
  };
};

export const getStaticProps = async (ctx) =&gt; {
  let data = null;

  try {
    // Requisição para pegar os posts.
    data = await loadPosts({ post: ctx.params.slug });
  } catch (error) {
    data = null;
  }

  // Se não houverem posts, retornará 404.
  if (!data || !data.posts || !data.posts.length) {
    return {
      notFound: true,
    };
  }

  // Quando chegar aqui, a página vai sair do fallback e será renderizada 
  // com os dados passados via props.
  return {
    props: {
      posts: data.posts,
    },
  };
};
</code></pre><ul><li>Este comportamento, quando o fallback é true, é muito bacana. Se não for encontrado um arquivo estático para aquela rota, esse arquivo é gerado no formato JSON e enviado ao browser do usuário. Ao mesmo tempo, essa rota é adicionada na lista de páginas pre-renderizadas, então, os acessos subsequentes na rota serão servidos com uma página gerada da mesma forma que as outras páginas, pre-renderizadas no momento da build, foram geradas.</li></ul>

Rotas dinâmicas em páginas estáticas no Next

No meu blog você poderá encontrar diversas informações sobre programação, principalmente na área do front-end com ReactJS e NextJS.