React Apollo 2.1 模拟模式错误

Question

我正在尝试为使用 React Apollo 2.1 的组件提供模拟模式。但是，它返回此错误。

Error: Network error: No more mocked responses for the query: {
  me {
    id
    email
    username
    first_name
    last_name
    bio
    website
  }
}
, variables: {}
    at new ApolloError (ApolloError.js:43)
    at ObservableQuery.currentResult (ObservableQuery.js:107)
    at Query._this.getQueryResult (react-apollo.browser.umd.js:319)
    at Query.render (react-apollo.browser.umd.js:421)
    at finishClassComponent (react-dom.development.js:8389)
    at updateClassComponent (react-dom.development.js:8357)
    at beginWork (react-dom.development.js:8982)
    at performUnitOfWork (react-dom.development.js:11814)
    at workLoop (react-dom.development.js:11843)
    at renderRoot (react-dom.development.js:11874)

您是如何在 React Apollo 2.1 上添加模拟功能的？我尝试搜索解决方案，但旧版本和新版本的信息都无法解决。

这是代码。

index.stories.js

import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { makeExecutableSchema, addMockFunctionsToSchema } from 'graphql-tools';
import gql from 'graphql-tag'
import { MemoryRouter } from 'react-router';
import { MockedProvider } from 'react-apollo/test-utils';
import { buildMockedClient } from '../../../mockedApolloClient';
import AccountSettings from './index';

const typeDefs = `
interface User {
  id: ID!,
  email: String!,
  username: String,
  first_name: String,
  last_name: String,
  bio: String,
  website: String
}

type Student implements User {
  id: ID!,
  email: String!,
  username: String,
  first_name: String,
  last_name: String,
  bio: String,
  website: String
}

type InputError {
  key: String!
  message: String!
}

type UserResult {
  errors: InputError,
  user: User
}

input UpdateAccountInput {
  first_name: String
  last_name:String
  email: String
  username: String
  bio: String
  website: String
}

type Query {
  me: User
}

type Mutation {
  updateAccount(params: UpdateAccountInput!): UserResult!
}
`

const typeResolvers = {
  User: {
    __resolveType(data) {
      return data.__typename // typename property must be set by your mock functions
    }
  }
}

const me = {
  id: () => 1,
  email: () => 'testuser@test.jp',
  username: () => 'hiro1107',
  first_name: () => 'Atsuhiro',
  last_name: () => 'Teshima',
  bio: () => 'test',
  website: () => 'https://www.test.jp',
}

const schema = makeExecutableSchema({
  typeDefs,
  typeResolvers
})

const mocks = {
  User: () => ({
    id: () => 1,
    email: () => 'testuser@codegrit.jp',
    username: () => 'hiro1107',
    first_name: () => 'Atsuhiro',
    last_name: () => 'Teshima',
    bio: () => 'test',
    website: () => 'https://www.codegrit.jp',
    __typename: () => 'Student'
  }),
  Query: () => ({
    me: () => me
  })
}

addMockFunctionsToSchema({
  schema,
  mocks,
  preserveResolvers: false
});

storiesOf('Account Settings', module)
  .addDecorator(story => (
    <MockedProvider client={mockedClient} mocks={mocks} >
      <MemoryRouter initialEntries={['/']}>{story()}</MemoryRouter>
    </MockedProvider>
  ))
  .add('With Mock', () => (
    <AccountSettings />
  ));

const mockedClient = buildMockedClient(schema);

storiesOf('Account Settings', module)
  .addDecorator(story => (
    <MockedProvider client={mockedClient} mocks={mocks} >
      <MemoryRouter initialEntries={['/']}>{story()}</MemoryRouter>
    </MockedProvider>
  ))
  .add('With Mock', () => (
    <AccountSettings />
  ));

mockedApolloClient.js

import { ApolloClient } from 'apollo-client';
import { SchemaLink } from 'apollo-link-schema';
import { InMemoryCache } from 'apollo-cache-inmemory';

const apolloCache = new InMemoryCache(window.__APOLLO_STATE__);

export function buildMockedClient(schema) {
  return new ApolloClient({
    cache: apolloCache,
    link: new SchemaLink({ schema })
  })
}

package.json

"apollo-cache-inmemory": "^1.1.9",
"apollo-client": "^2.2.5",
"apollo-link-context": "^1.0.7",
"apollo-link-http": "^1.5.2",
"apollo-link-schema": "^1.1.0",
"graphql": "^0.13.1",
"graphql-tag": "^2.8.0",
"graphql-tools": "^2.24.0",
"react": "^16.3.1",
"react-apollo": "^2.1.0",
"react-dom": "^16.3.1",

Answer 1

我发现我需要使用 ApolloProvider 而不是 MockedProvider。

因此，此代码将起作用。

import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { makeExecutableSchema, addMockFunctionsToSchema } from 'graphql-tools';
import gql from 'graphql-tag'
import { MemoryRouter } from 'react-router';
import { ApolloProvider, Query } from 'react-apollo';
import { buildMockedClient } from '../../../mockedApolloClient';
import AccountSettings from './index';

const typeDefs = `
type Query {
  me: User!
}

type Mutation {
  updateAccount(params: UpdateAccountInput!): UserResult!
}

interface User {
  id: ID!,
  email: String!,
  username: String,
  first_name: String,
  last_name: String,
  bio: String,
  website: String
}

type Student implements User {
  id: ID!,
  email: String!,
  username: String,
  first_name: String,
  last_name: String,
  bio: String,
  website: String
}

type InputError {
  key: String!
  message: String!
}

type UserResult {
  errors: InputError,
  user: User
}

input UpdateAccountInput {
  first_name: String
  last_name:String
  email: String
  username: String
  bio: String
  website: String
}
`

 const typeResolvers = {
   User: {
     __resolveType(data) {
       return data.__typename()
    }
  }
}

const mocks = {
  User: () => ({
    id: () => 1,
    email: 'testuser@codegrit.jp',
    username: 'hiro1107',
    first_name: 'Atsuhiro',
    last_name: 'Teshima',
    bio: 'test',
    website: 'https://www.test.jp',
    __typename: 'Student',
  }),
  Student: () => ({
    id: () => 1,
    email: 'testuser@test.jp',
    username: 'hiro1107',
    first_name: 'Atsuhiro',
    last_name: 'Teshima',
    bio: 'test',
    website: 'https://www.test.jp',
    __typename: () => 'Student'
  }),
  query: () => ({
    me: () => ({
      id: () => 1,
      email: 'testuser@test.jp',
      username: 'hiro1107',
      first_name: 'Atsuhiro',
      last_name: 'Teshima',
      bio: 'test',
      website: 'https://www.test.jp',
      __typename: () => 'Student'
    })
  })
}

const schema = makeExecutableSchema({
  typeDefs,
  resolvers: typeResolvers
})

addMockFunctionsToSchema({
  schema,
  mocks,
  preserveResolvers: true
});

const client = buildMockedClient(schema);

const userQuery = gql`
  query {
    me {
      id
      email
      username
      first_name
      last_name
      bio
      website
    }
  }
`

storiesOf('Account Settings', module)
  .addDecorator(story => (
    <ApolloProvider client={client} >
      <MemoryRouter initialEntries={['/']}>{story()}</MemoryRouter>
    </ApolloProvider>
  ))
  .add('With Mock', () => (
    <AccountSettings />
  ));