Category of Post created by Strapi cannot be retrieved by GraphQL of Gatsby.js. However, it is displayed in GraphiQL of Gatsby.js

If you are able to see the categories in GraphiQL and not display them, your issue is in the view and how are you treating the data. In this case, (after the typical editions), categories is an array as posts are so unless you loop through them, you won't be able to display them.

Do something like:

    import React from "react";
import { Link } from "gatsby";
import * as styles from "./PostCell.module.css";
import {Row,Col,Card,Button,container,OverlayTrigger} from 'react-bootstrap'


const PostCell = (props) => {
  const { title, content, categories, published_at, slug, thumbnail } = props.post;
  const plainContent = (content || "").replace(/(<([^>]+)>)/gi, "");
  return (


      <Card className={styles.container} >
            <Link to={`/posts/${slug}` } className={styles.link}>

          <Card.Img className="m-0" variant="top" src={thumbnail} alt={title} style={{width:`351px`,height:`160px`}}></Card.Img>
          <Card.Body  className={styles.cardContents} >
<Card.Title  variant="light" className={styles.cardTitle}>     {title}
</Card.Title>

<div className={styles.footer}>

<Link to={`/category/${categories.slug}`} >
{categories.map(category=>{
   return <Button className="categoryButton" variant='primary' style={{padding:`5px`,fontSize:`10px`}}>{category.name}</Button>
})}
</Link>
<Card.Footer >{published_at}</Card.Footer>
</div>

        </Card.Body>
        </Link>

      </Card>

The key part is:

{categories.map(category=>{
   return <Button className="categoryButton" variant='primary' style={{padding:`5px`,fontSize:`10px`}}>{category.name}</Button>
})}