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

Posted 2023-03-08

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

【英文标题】：ERROR : Unknown field 'discussion' on type 'Mutation'. with Relay and React `useMutation` hook

【发布时间】：2021-11-20 09:35:23

【问题描述】：

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

我已按照 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;

非常感谢大家！

问候， 苏鲁什

【参考方案1】：

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

这只是一小段代码：

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

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

希望很清楚。 谢谢大家。

Sourouche。