错误：“突变”类型上的未知字段“讨论”。使用 Relay 和 React `useMutation` 钩子

Question

我遇到了一个在互联网上找不到任何解决方法的问题。希望有人可以在这里帮助我:)。

我已按照 Relay 分步指南在 Relay 和 GraphQL (https://relay.dev/docs/getting-started/step-by-step-guide/) 上提高自己，但在尝试执行时遇到此错误：yarn run relay-compiler --src ./src --schema ./schema.graphql。

这是我的代码：

import { get } from 'lodash';
import './App.css';
import graphql from 'babel-plugin-relay/macro';
import { RelayEnvironmentProvider, loadQuery, usePreloadedQuery } from 'react-relay/hooks';
import RelayEnvironment from './RelayEnvironment';

const { Suspense } = React;
const { useMutation } = require('react-relay');

// Define a query
const RepositoryNameQuery = graphql`
  query AppRepositoryNameQuery {
    repository(owner: "xxx", name: "xxx") {
      id
      name
      object(expression: "master") {
        ... on Commit {
          history {
            nodes {
              abbreviatedOid
              message
              committedDate
              additions
              author {
                name
                email
              }
              tree {
                entries {
                  name
                }
              }
            }
            pageInfo {
              endCursor
            }
          }
        }
      }
    }
  }
`;

const SomeButton = props => {
  console.log(get(props, 'repositoryId'));
  const [commit, isInFlight] = useMutation(graphql`
    mutation AppCreateDiscussionMutation($input: CreateDiscussionInput!) {
      discussion {
        id
      }
    }
  `);

  if (isInFlight) {
    console.log('spinner');
    // return <Spinner />;
  }

  return (
    <button
      onClick={() => {
        commit({
          variables: {
            input: {
              repositoryId: '1234',
              categoryId: '5678',
              body: 'The body',
              title: 'The title',
            },
          },
          onCompleted(data) {
            console.log(data);
          },
        });
      }}
    />
  );
};

// Immediately load the query as our app starts. For a real app, we'd move this
// into our routing configuration, preloading data as we transition to new routes.
const preloadedQuery = loadQuery(RelayEnvironment, RepositoryNameQuery, {
  /* query variables */
});

// Inner component that reads the preloaded query results via `usePreloadedQuery()`.
// This works as follows:
// - If the query has completed, it returns the results of the query.
// - If the query is still pending, it "suspends" (indicates to React that the
//   component isn't ready to render yet). This will show the nearest <Suspense>
//   fallback.
// - If the query failed, it throws the failure error. For simplicity we aren't
//   handling the failure case here.
const App = props => {
  const data = usePreloadedQuery(RepositoryNameQuery, props.preloadedQuery);
  const { repository } = data;
  const { name, object } = repository;
  const { history } = object;
  const { nodes } = history;

  return (
    <div className="App">
      <header className="App-header">
        <p>{name}</p>
        {nodes.map(commit => (
          <>
            <p>{get(commit, 'author.name')}</p>
            <p>{get(commit, 'message')}</p>
          </>
        ))}
      </header>
      <SomeButton repositoryId={get(repository, 'id')} />
    </div>
  );
};

// The above component needs to know how to access the Relay environment, and we
// need to specify a fallback in case it suspends:
// - <RelayEnvironmentProvider> tells child components how to talk to the current
//   Relay Environment instance
// - <Suspense> specifies a fallback in case a child suspends.
const AppRoot = props => {
  return (
    <RelayEnvironmentProvider environment={RelayEnvironment}>
      <Suspense fallback={'Loading...'}>
        <App preloadedQuery={preloadedQuery} />
      </Suspense>
    </RelayEnvironmentProvider>
  );
};

export default AppRoot;

非常感谢大家！

问候， 苏鲁什

Answer 1

我终于找到了我的代码不起作用的地方！

这只是一小段代码：

const [commit, isInFlight] = useMutation(graphql`
  mutation AppCreateDiscussionMutation($input: CreateDiscussionInput!) {
    createDiscussion(input: $input) {
      discussion {
        id
      }
    }
  }
`);

我刚刚忘记了我必须在我自己命名的突变下方重新指定我想要的突变。因此，我使用 AppCreateDiscussionMutation 作为我自己命名的突变，并从 github graphQL 选项中指定了 createDiscussion 突变。

希望很清楚。 谢谢大家。

Sourouche。