StaticQuery vs. useStaticQuery

Diferencias entre consultas a GraphQL desde páginas, con StaticQuery o useStaticQuery:

Las páginas de Gatsby (los archivos de la carpeta src/pages) nos permiten hacer consultas a GraphQL. Debemos exportar la propiedad query con el esquema de nuestra consulta y esto nos permitirá recibir los datos como props en el componente que exportamos en esa misma página.

Por ejemplo:

export const query = graphql`
  query GET_DATA {
    # ...
  }
`

export default ({ data }) => {
  console.log(data);

  return /* ... */;
}

Pero esta sintaxis solo funciona en las páginas de Gatsby. Si necesitamos hacer consultas desde algún otro componente de nuestra aplicación podemos usar el componente StaticQuery.

Solo debemos escribir la consulta en la propiedad query para recibir la información desde la propiedad render:

<StaticQuery
  query={graqhql`
    query {
      # ...
  `}
  render={data => {
    console.log(data);
    return <AnyOtherComponent data={data} />;
  }}
/>

También podemos usar el hook useStaticQuery: funciona igual que StaticQuery pero nos permite usar la sintaxis de los hooks:

const data = useStaticQuery(
  graphql`
    query {
      # ...
    }
  `
)