vıtalıyırtlach

Вы можете использовать простую библиотеку aos:
в теге head:

<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

перед закрытием тега body:

<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
  AOS.init();
</script>

https://michalsnik.github.io/aos/

setState работает следуещем способом:
принимает на вход функцию возвращающее новое состояние или новое состояние. Так как state - это объект тогда он делает следуещее:

// ... - spread оператор
state = {...state, ...newState} // так как newState идет после state тогда он перепишет все старые значения на новые или добавит новые

https://learn.javascript.ru/rest-parameters-spread...

у вас в компоненте Dialogs передается в props функция sendMessage вы должны ее прокинуть в компонент AddMessageForm :

import React from 'react';
import classes from './Dialogs.module.css';
import DialogItem from "./DialogItem/DialogItem";
import Message from "./Message/Message";
import {Redirect} from "react-router-dom";
import {Field, Form, Formik} from 'formik';

const Dialogs = (props) => {
    let state = props.dialogsPage;

    let dialogsElements = state.dialogs
        .map(el => <DialogItem name={el.name} key={el.id} id={el.id} avatar={el.avatar}/>);
    let messagesElements = state.messages
        .map(el => <Message message={el.message} key={el.id}/>);


    if (!props.isAuth) return <Redirect to={"/login"}/>;

    return (
        <div className={classes.dialogs}>
            <div className={classes.dialogsItems}>
                {dialogsElements}
            </div>
            <div className={classes.messages}>
                <div>{messagesElements}</div>
            </div>
            <AddMessageForm sendMessage={props.sendMessage}/>
        </div>
    )
}



const AddMessageForm = (props) => {
const initialValues = {
    newMessageBody: ''
}
const onSubmit = values => {
    props.sendMessage(values.newMessageBody);
    console.log('запись', values)
}
    return (
        <Formik initialValues={initialValues} onSubmit={onSubmit}>
            <Form>
                <div>
                    <div>
                        <Field as='textarea'
                               id='newMessageBody'
                               name='newMessageBody'/>
                    </div>
                    <button type='submit'>Submit</button>
                </div>
            </Form>
        </Formik>
    )
}

export default Dialogs;

// Отрисовываем карточки

const cards = document.querySelectorALl("card selector")
for(const card of cards) {
card.addEventListener("click", e => {
// у каждой карточки в атрибуте id задайте ID индификатор (_id) card.id = _id
const id = e.target.id // получаем индификатор и отправляем на сервер


})
}

Вы можете использовать hook от Gatsby useStaticQuery вместо workquery тогда получиться следующее

const WorkQuery = graphql`
  query WP_Posts {
    allWpPost {
      edges {
        post: node {
          id
          title
          slug
          excerpt
          uri
          }
        }
      }
    }
  }
`

const Work = () => {
const query = useStaticQuery()
  return (
      {query.allWpPost.edges.map(({ post }) => (
      <div>
        <Link to={post.slug}>
        <p>{post.title}</p>
        </Link>
        <div dangerouslySetInnerHTML={{ __html: post.excerpt }} />
      </div>
      ))}

  )
}
export default Work

https://www.gatsbyjs.com/docs/how-to/querying-data...

так же возможно проблема в наименовании запроса вместо WorkQuery используйте query

- export const WorkQuery = graphql`
  query WP_Posts {
    allWpPost {
      edges {
        post: node {
          id
          title
          slug
          excerpt
          uri
          }
        }
      }
    }
 }
`

- 
+ export const query = graphql`
  query WP_Posts {
    allWpPost {
      edges {
        post: node {
          id
          title
          slug
          excerpt
          uri
          }
        }
      }
    }
 }
`

Согласно документации: https://www.gatsbyjs.com/docs/how-to/querying-data...

Ответ нет! Так как при каждом пути React будет отрисовывать все заново! И это будет затратно! сделайте лучше в App.js(x)

import React from "react"

function App(props) {
// при изменении путя работает только с путем #
window.onhashchange = () => {
switch (document.location.pathname) {
  case '/': {
    return <Index />
  }
  default: {
        return <h1>Error</h1>
  }
}
}
}

export default App

и в index.js(x)

import App from "path/to/App.js(x)"
 ReactDOM.render(
        <App />
        document.getElementById('root'),
    );

но вообще используйте react-router-dom

Ссылки:
https://developer.mozilla.org/ru/docs/Web/API/Wind...
https://reactrouter.com/web/guides/quick-start