title: [GraphQL error]: Message: Variable "$slug" of required type "String!" was not provided., Location: [object Object], Path: undefined
body: <p>I am trying to use slug as url but its not working. I get error in console something like this.</p>
  
  <blockquote>
    <p>[GraphQL error]: Message: Variable "$slug" of required type "String!" was not provided., Location: [object Object], Path: undefined</p>
  </blockquote>
  
  <p>This is my code.
  Although it is working fine if i use id instead of slug. I am getting these data from wordpress wp-graphql api.</p>
  
  <blockquote>
    <p>graphql/queries/post.js</p>
  </blockquote>
  
  <pre><code>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
        }
      }
    }
  `;
  </code></pre>
  
  <blockquote>
    <p>views/postDetail.js</p>
  </blockquote>
  
  <pre><code>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 (
               &lt;Layout&gt;
                   {isLoading &amp;&amp; &lt;Loader/&gt;}
                   {!isLoading &amp;&amp; this.renderPost()}
               &lt;/Layout&gt;
           )
       }
       renderPost () {
      const post = this.props.data.postBy
      console.log(post);
      const date = new Date(post.date).toLocaleDateString()
      return (
        &lt;div className=" container has-text-centered postdetail__wrapper"&gt;
          &lt;h2 className="subtitle"&gt;{post.author.name}&lt;/h2&gt;
          &lt;h1 className="title is-2"&gt;{post.title}&lt;/h1&gt;
  
          &lt;h5 className="subtitle is-7"&gt;{post.categories.nodes.name}&lt;/h5&gt;
          &lt;h5 className="subtitle is-7"&gt;{date}&lt;/h5&gt;
          &lt;img
              alt={post.title}
              src={post.featuredImage &amp;&amp; post.featuredImage.sourceUrl}
          /&gt;
          &lt;div className="postdetail__content" dangerouslySetInnerHTML={{ __html: post.content }} /&gt;
        &lt;/div&gt;
      )
    }
    }
  
  
  
  export default graphql(SinglePostDetail, {
      options: ({match}) =&gt; ({variables: {slug: match.params.slug}})
  })(PostDetail);
  </code></pre>
  
  <blockquote>
    <p>Routes.js</p>
  </blockquote>
  
  <pre><code>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 (
      &lt;BrowserRouter&gt;
        &lt;Switch&gt;
            &lt;Route path="/" exact component={Home}/&gt;
            &lt;Route path="/about" component={About}/&gt;
            &lt;Route path="/blog" component={Blog}/&gt;          
            &lt;Route path='/category/:slug' component={Category}/&gt;
            &lt;Route path="/post/:slug" component={PostDetail}/&gt;
            &lt;Route path="/contact" component={Contact}/&gt;
        &lt;/Switch&gt;
      &lt;/BrowserRouter&gt;
    )
  }
  
  export default Routes
  </code></pre>
  
  <p>if I log props.data i get something like this.</p>
  
  <blockquote>
    <p>console.log(props.data);</p>
  </blockquote>
  
  <pre><code>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
  </code></pre>