[GraphQL 错误]：消息：所需类型“String！”的变量“$slug”未提供。，位置：[object Object]，路径：未定义答案

【问题标题】：[GraphQL error]: Message: Variable "$slug" of required type "String!" was not provided., Location: [object Object], Path: undefined[GraphQL 错误]：消息：所需类型“String！”的变量“$slug”未提供。，位置：[object Object]，路径：未定义
【发布时间】：2019-06-29 23:54:56
【问题描述】：

我正在尝试使用 slug 作为 url，但它不起作用。我在控制台中遇到类似这样的错误。

[GraphQL 错误]：消息：所需类型“String！”的变量“$slug”未提供。，位置：[object Object]，路径：未定义

这是我的代码。虽然如果我使用 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

【问题讨论】：

该错误表明slug 变量的值未定义，因此您可能未正确传递该变量。请包含显示您如何在应用中实际使用此查询的相关代码。
如果你将match.params.slug 登录到控制台，是否已定义？
它说未定义
但它在 graphiql 中运行良好
这不是 GraphQL 问题。关键是你要求一个显然不存在的参数。您的路由器匹配的Route 组件的路径是什么？假设您使用的是 react-router，则匹配路由的路径需要包含 :slug 才能定义 match.params.slug。例如，如果您的路径是/foo/:id，则将定义match.params.id。如果您的路径是 /foo/:bar，则将定义 match.params.bar。

标签： reactjs graphql

【解决方案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.

【讨论】：