Question

我正在尝试将Slug用作url，但无法正常工作。我在控制台中遇到这样的错误。

[GraphQL错误]：消息：所需类型为“字符串！”的变量“ $ slug”未提供。，位置：[对象对象]，路径：未定义

这是我的代码。虽然我使用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.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全局ID作为slug传递。这就是为什么当您使用id参数时它起作用的原因。

slug: "cG9zdDo1NA==" <-这就是您作为$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。

[GraphQL错误]：消息：所需类型为“字符串！”的变量“ $ slug”未提供。，位置：[对象对象]，路径：未定义

1 个答案: