[Ошибка GraphQL]: Сообщение: Переменная "$slug" требуемого типа "String!" не был предоставлен., Расположение: [объект Объект], Путь: не определен

Я пытаюсь использовать слаг в качестве URL-адреса, но он не работает. Я получаю ошибку в консоли что-то вроде этого.

[GraphQL error]: Message: Variable "$slug" of required type "String!" was not provided., Location: [object Object], Path: undefined

Это мой код. Хотя он отлично работает, если я использую id вместо slug. Я получаю эти данные из wordpress wp-graphql api.

graphql/queries/post.js

import gql from 'graphql-tag';    
export const SinglePostDetail = gql`
  query SinglePostDetail($slug: String!) {
    postBy(slug: $slug) {
      id
      slug
      title
      date
      content
      categories{
        nodes {
          name
        }
      }
      author {
        name
      }
      featuredImage {
        sourceUrl
      }
    }
  }
`;

views/postDetail.js

import React, {Component} from 'react';
import { graphql } from 'react-apollo'
import { SinglePostDetail } from '../graphql/queries/posts'
import Layout from '../components/layout';
import Loader from '../components/Loader/loading';
import './postDetail.scss';

class PostDetail extends Component {   
    constructor () {
        super()
        this.renderPost = this.renderPost.bind(this)
    }
     render() {
         const isLoading = this.props.data.loading
         return (
             <Layout>
                 {isLoading && <Loader/>}
                 {!isLoading && this.renderPost()}
             </Layout>
         )
     }
     renderPost () {
    const post = this.props.data.postBy
    console.info(post);
    const date = new Date(post.date).toLocaleDateString()
    return (
      <div className = " container has-text-centered postdetail__wrapper">
        <h2 className = "subtitle">{post.author.name}</h2>
        <h1 className = "title is-2">{post.title}</h1>

        <h5 className = "subtitle is-7">{post.categories.nodes.name}</h5>
        <h5 className = "subtitle is-7">{date}</h5>
        <img
            alt = {post.title}
            src = {post.featuredImage && post.featuredImage.sourceUrl}
        />
        <div className = "postdetail__content" dangerouslySetInnerHTML = {{ __html: post.content }} />
      </div>
    )
  }
  }



export default graphql(SinglePostDetail, {
    options: ({match}) => ({variables: {slug: match.params.slug}})
})(PostDetail);

Routes.js

import React from 'react'
import { BrowserRouter,Route, Switch} from 'react-router-dom';
import Home from './views/Home';
import About from './views/About';
import Contact from './views/Contact';
import Category from './views/Category';
import PostDetail from './views/PostDetail';
import Blog from './views/Blog';

function Routes() {
  return (
    <BrowserRouter>
      <Switch>
          <Route path = "/" exact component = {Home}/>
          <Route path = "/about" component = {About}/>
          <Route path = "/blog" component = {Blog}/>          
          <Route path='/category/:slug' component = {Category}/>
          <Route path = "/post/:slug" component = {PostDetail}/>
          <Route path = "/contact" component = {Contact}/>
      </Switch>
    </BrowserRouter>
  )
}

export default Routes

если я зарегистрирую props.data, я получу что-то вроде этого.

console.info(props.data);

error: Error: GraphQL error: No resource could be found at new ApolloError fetchMore: ƒ ()
loading: false
networkStatus: 7
refetch: ƒ ()
startPolling: ƒ ()
stopPolling: ƒ ()
subscribeToMore: ƒ ()
updateQuery: ƒ ()
variables:
slug: "cG9zdDo1NA= = "
__proto__: Object
__proto__: Object