ra-data-graphql-simple 找不到资源答案

【问题标题】：ra-data-graphql-simple can not find resourcera-data-graphql-simple 找不到资源
【发布时间】：2019-09-03 14:02:09
【问题描述】：

我正在尝试使用 react-admin 作为我的管理面板并使用 ra-data-graphql-simple 从 graphql API 获取。问题是它找不到我的资源，我收到了这个错误：

Unknown resource Category. Make sure it has been declared on your server side schema. Known resources are

这是我的代码。

App.js

import React, { Component } from 'react';
import buildGraphQLProvider from 'ra-data-graphql-simple';
import { Admin, Resource, Delete, ListGuesser  } from 'react-admin';

import apolloClient from './apolloSetup';

import { CategoryList } from './categories';

class App extends Component {
    constructor() {
        super();
        this.state = { dataProvider: null };
    }
    componentDidMount() {
        buildGraphQLProvider({ clientOptions: { uri: 'http://127.0.0.1:3434/graphql' }})
            .then(dataProvider => this.setState({ dataProvider }));
    }

    render() {
        const { dataProvider } = this.state;

        if (!dataProvider) {
            return <div>Loading</div>;
        }

        return (
            <Admin dataProvider={dataProvider}>
                <Resource name="Category" list={ListGuesser} />
            </Admin>
        );
    }
}

export default App;

和 apolloSetup.js

import { HttpLink, createHttpLink } from 'apollo-link-http';
import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';

const httpLink = createHttpLink({
  uri: 'http://localhost:3434/graphql',
  mode: 'no-cors',
});

export default new ApolloClient({
  cache: new InMemoryCache(),
  link: httpLink,
});

这是我的 Graphql 架构。（类别父 ID 始终为 1。）

# source: http://127.0.0.1:3434/graphql


type Category {
  body: String
  disabled: Boolean
  id: ID
  image: Upload
  parentId: ID
  title: String
  user: User
}

"""Autogenerated input type of ConfirmOtp"""
input ConfirmOtpInput {
  mobile: String!
  otp: String!

  """A unique identifier for the client performing the mutation."""
  clientMutationId: String
}

"""Autogenerated return type of ConfirmOtp"""
type ConfirmOtpPayload {
  accessToken: String

  """A unique identifier for the client performing the mutation."""
  clientMutationId: String
  errors: [String!]!
}

"""Autogenerated input type of CreateCategory"""
input CreateCategoryInput {
  title: String!
  body: String
  parentId: ID
  image: Upload

  """A unique identifier for the client performing the mutation."""
  clientMutationId: String
}

"""Autogenerated return type of CreateCategory"""
type CreateCategoryPayload {
  category: Category

  """A unique identifier for the client performing the mutation."""
  clientMutationId: String
  errors: [String!]
}

"""Autogenerated input type of CreatePost"""
input CreatePostInput {
  title: String!
  body: String
  categoryId: ID!
  image: Upload
  video: Upload

  """A unique identifier for the client performing the mutation."""
  clientMutationId: String
}

"""Autogenerated return type of CreatePost"""
type CreatePostPayload {
  """A unique identifier for the client performing the mutation."""
  clientMutationId: String
  errors: [String!]!
  post: Post!
}

"""Autogenerated input type of GenerateOtp"""
input GenerateOtpInput {
  mobile: String!

  """A unique identifier for the client performing the mutation."""
  clientMutationId: String
}

"""Autogenerated return type of GenerateOtp"""
type GenerateOtpPayload {
  """A unique identifier for the client performing the mutation."""
  clientMutationId: String
  result: String
}

type Mutation {
  confirmOtp(input: ConfirmOtpInput!): ConfirmOtpPayload
  createCategory(input: CreateCategoryInput!): CreateCategoryPayload
  createPost(input: CreatePostInput!): CreatePostPayload
  generateOtp(input: GenerateOtpInput!): GenerateOtpPayload
}

type Post {
  body: String
  category: Category
  disabled: Boolean
  id: ID
  image: Upload
  title: String
  user: User
  video: Upload
}

type Query {
  """List of all categories or categories of a directory"""
  categories(parentId: ID): [Category!]

  """Returns the current user"""
  currentUser: User!

  """Find a post by ID"""
  post(id: ID!): Post

  """List of all posts"""
  posts(categoryId: ID!): [Post!]
}

scalar Upload

type User {
  mobile: String!
}

我应该创建一个自定义数据提供者吗？如果是，我应该如何为这个架构创建它？

【问题讨论】：

标签： reactjs graphql react-admin

【解决方案1】：

如果您查看源代码，您会注意到 Resource 是 knownResource 如果它具有最小类型：

Query {
   Post (id: ID!): Post
   allPosts (page: Int, perPage: Int, sortField: String, sortOrder: String, filter: PostFilter): [Post]

}

【讨论】：

【解决方案2】：

在幕后 ra-data-graphql-simple 使用“复数”库，并且在评估资源是否可用时对大小写等极为敏感。如果资源没有正确大小写的版本以及至少 GET_ONE、GET_LIST 查询元素，它将忽略该资源。因此，对于原始帖子“类别”，至少需要“所有类别”和“类别”才能显示为可查询的项目。

【讨论】：

【解决方案3】：

如果您仍然坚持这一点，我建议您将架构缩减为仅 Category 类型和相关突变。有关 ra-data-graphql-simple 的预期 GraphQL 模式格式，请参阅 https://github.com/marmelab/react-admin/tree/master/packages/ra-data-graphql-simple#expected-graphql-schema。尝试将您的资源换成这种格式。 ra-data-graphql-simple 非常挑剔，如果它不喜欢您的架构，它将忽略资源（因此您的错误消息没有资源）。

【讨论】：