-1

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

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

非常感谢大家！

问候， 苏鲁什

4

1 回答 1

1

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

这只是一小段代码：

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

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

希望很清楚。谢谢大家。

苏鲁什。

于 2021-09-28T10:53:53.037 回答