按照文档搭建react-admin+GraphQL原型遇到问题求助

Let's walk through the most common pitfalls and fixes for getting json-graphql-server up and running with your React-Admin prototype—since you've already nailed the React-Admin setup with ra-data-graphql-simple, we'll focus on the server side.

First, Cover the Basics #

It looks like you might have missed a key step in your setup. Let's start there:

• Install json-graphql-server first – You didn't list this in your commands, so run:

  yarn add json-graphql-server --dev
  

• Validate your db.js structure – The server relies on a properly formatted export of your data models. It needs pluralized model names and plain objects for initial data. Example:

  // db.js
  module.exports = {
    posts: [
      { id: 1, title: "My First Post", content: "Hello GraphQL!" },
      { id: 2, title: "Second Post", content: "React-Admin is awesome" }
    ],
    users: [
      { id: 1, name: "Jane Doe", email: "jane@example.com" }
    ]
  };
  

• Run the server correctly – Use this command to start the server (adjust the path to db.js if it's in a subfolder):

  npx json-graphql-server db.js
  

  Or add a script to your package.json for easier access:

  "scripts": {
    "graphql-server": "json-graphql-server db.js"
  }
  

  Then run yarn graphql-server to start it.

Fix Common Error Scenarios #

1. "Cannot find module 'db.js'" #

• Double-check the file path: if your db.js is in a folder like ./data/db.js, update the command to npx json-graphql-server ./data/db.js.
• Filenames are case-sensitive on Linux/macOS—make sure you're spelling it exactly right.

2. Server Starts But No Schema Shows in GraphQL Playground #

• Use pluralized model names: The server auto-generates the schema from plural keys (e.g., posts instead of post, users instead of user). Singular names won't work.
• Avoid reserved words: Don't name models things like query, mutation, or schema—these conflict with GraphQL's core syntax.

3. React-Admin Can't Connect to the Server #

• Port conflict: By default, both Create React App and json-graphql-server try to run on port 3000. Start the GraphQL server on a different port:

  npx json-graphql-server db.js --port 4000
  

• Update your React-Admin data provider to point to the new URL:

  // App.js
  import { buildGraphQLProvider } from 'ra-data-graphql-simple';
  import { useState, useEffect } from 'react';
  import { Admin, Resource } from 'react-admin';
  // Import your components here
  
  const App = () => {
    const [dataProvider, setDataProvider] = useState(null);
  
    useEffect(() => {
      buildGraphQLProvider({ 
        clientOptions: { uri: 'http://localhost:4000/graphql' } 
      }).then(setDataProvider);
    }, []);
  
    if (!dataProvider) return <div>Loading...</div>;
  
    return (
      <Admin dataProvider={dataProvider}>
        <Resource name="posts" /* add list/edit components */ />
      </Admin>
    );
  };
  
  export default App;
  

4. Syntax Errors in db.js #

• Test if your db.js is valid JavaScript by running node db.js in your terminal—this will immediately flag any missing commas, curly braces, or export issues.

Final Tip #

If you're still stuck, share the exact error message from your server terminal and a snippet of your db.js file. That will help pinpoint the problem even faster.

内容的提问来源于stack exchange，提问作者mrcasa bengaluru