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

Question

Я пытаюсь использовать слаг в качестве URL, но он не работает.Я получаю сообщение об ошибке в консоли:не был предоставлен., Местоположение: [объект Объект], путь: не определено

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

graphql / questions / 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.log(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.log (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

Answer 1

Вы передаете Relay Global ID как slug.Вот почему это работает, когда вы вместо этого используете параметр id.

slug: "cG9zdDo1NA==" <- это то, что вы передаете как <code>$slug.Возможно, у вас есть ошибка в том, как вы переходите на страницу.Проверьте ваш компонент NavLink или Link, если вы его используете.

Либо перейдите к фактическому сообщению slug, либо измените свой запрос следующим образом:

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

[GraphQL error]: Message: Variable "$slug" of required type "String!" was not provided. <- эта ошибка вызвана тем, что передаваемое имеет тип ID. </p>