RelayModernGraphQLTag：预期请求，得到：

Question

当使用新的 react-relay expirimental 时，我得到了这个错误：

invariant.js:40 Uncaught Invariant Violation: RelayModernGraphQLTag: Expected a request, got `{"default":{"kind":"Request","fragment":{"kind":"Fragment","name":"FlowsQuery","type":"Query","metadata":null,"argumentDefinitions":[],"selections":[{"kind":"LinkedField","alias":null,"name":"flows","storageKey":null,"args":null,"concreteType":"Flow","plural":true,"selections":[{"kind":"ScalarField","alias":null,"name":"id","args":null,"storageKey":null},{"kind":"FragmentSpread","name":"Flow_flow","args":null}]}]},"operation":{"kind":"Operation","name":"FlowsQuery","argumentDefinitions":[],"selections":[{"kind":"LinkedField","alias":null,"name":"flows","storageKey":null,"args":null,"concreteType":"Flow","plural":true,"selections":[{"kind":"ScalarField","alias":null,"name":"id","args":null,"storageKey":null},{"kind":"ScalarField","alias":null,"name":"title","args":null,"storageKey":null},{"kind":"ScalarField","alias":null,"name":"description","args":null,"storageKey":null}]}]},"params":{"operationKind":"query","name":"FlowsQuery","id":null,"text":"query FlowsQuery {\n  flows {\n    id\n    ...Flow_flow\n  }\n}\n\nfragment Flow_flow on Flow {\n  id\n  title\n  description\n}\n","metadata":{}},"hash":"d6b715a97b84f420e60e112ce758e768"}}`.

我的代码： Component.tsx

  const { flows }: FlowsQueryResponse = usePreloadedQuery<FlowsQuery>(
    graphql`
      query FlowsQuery {
        flows {
          id
          # Include child fragment
          ...Flow_flow
        }
      }
    `,
    props.prepared.flowsQuery
  )

Routes.js

const routes = [{
    path: '/',
    exact: true,
    /**
     * A lazy reference to the component for the home route. Note that we intentionally don't
     * use React.lazy here: that would start loading the component only when it's rendered.
     * By using a custom alternative we can start loading the code instantly. This is
     * especially useful with nested routes, where React.lazy would not fetch the
     * component until its parents code/data had loaded. Nested route support isn't
     * implemented in our mini-router yet, but one can imagine iterating over all
     * the matched route entries and calling .load() on each of their components.
     */
    component: JSResource('Flows', () => import('./Flows/Flows')),
    /**
     * A function to prepare the data for the `component` in parallel with loading
     * that component code. The actual data to fetch is defined by the component
     * itself - here we just reference a description of the data - the generated
     * query.
     */
    prepare: params => {
      console.log('params', { params })
      const FlowsQuery = require('./__generated__/FlowsQuery.graphql')
      return {
        flowsQuery: preloadQuery(
          RelayEnvironment,
          FlowsQuery,
          {},
          // The fetchPolicy allows us to specify whether to render from cached
          // data if possible (store-or-network) or only fetch from network
          // (network-only).
          { fetchPolicy: 'store-or-network' }
        ),
      }
    },
  }]

Answer 1

打字稿编译器或 webpack 加载器无法理解生成的 'FlowsQuery.graphql' 文件中定义的导出默认值。

所以改变这条线

const FlowsQuery = require('./__generated__/FlowsQuery.graphql')

到

const FlowsQuery = require('./__generated__/FlowsQuery.graphql').default

已修复！

RelayModernGraphQLTag：预期请求，得到：

RelayModernGraphQLTag: Expected a request, got:

typescript

react-relay