Graphql React Apollo 2.1模拟模式错误_Graphql_React Apollo

Graphql React Apollo 2.1模拟模式错误

graphql

Graphql React Apollo 2.1模拟模式错误,graphql,react-apollo,Graphql,React Apollo,我试图使用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

我试图使用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 />
  ));

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",

我发现我需要使用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 />
  ));

从“React”导入React；
从'@storybook/react'导入{storiesOf}；
从“@storybook/addon actions”导入{action}；
从“graphql工具”导入{makeExecutableSchema，addMockFunctionsToSchema}；
从“graphql标记”导入gql
从“react路由器”导入{MemoryRouter}；
从'react apollo'导入{ApolloProvider，Query}；
从“../../../mockedApolloClient”导入{buildMockedClient}；
从“./index”导入帐户设置；
常量typeDefs=`
类型查询{
我：用户！
}
类型突变{
updateAccount（参数：UpdateAccountInput！）：UserResult！
}
界面用户{
id:id！，
电子邮件：String！，
用户名：String，
名字：String，
姓氏：String，
生物：字符串，
网站：String
}
类型Student实现用户{
id:id！，
电子邮件：String！，
用户名：String，
名字：String，
姓氏：String，
生物：字符串，
网站：String
}
类型输入器{
钥匙：绳子！
信息：字符串！
}
输入UserResult{
错误：输入者，
用户：用户
}
输入更新accountinput{
名字：String
姓氏：String
电子邮件：String
用户名：String
生物：字符串
网站：String
}
`
常量类型解析程序={
用户：{
__解析类型（数据）{
返回数据。\uuuTypeName（）
}
}
}
常数模拟={
用户：（）=>({
id:（）=>1，
电邮:'testuser@codegrit.jp',
用户名：“hiro1107”，
名字：“Atsuhiro”，
姓：“Teshima”，
生物：“测试”，
网站：'https://www.test.jp',
__typename:'学生'，
}),
学生：（）=>({
id:（）=>1，
电邮:'testuser@test.jp',
用户名：“hiro1107”，
名字：“Atsuhiro”，
姓：“Teshima”，
生物：“测试”，
网站：'https://www.test.jp',
__typename:（）=>“学生”
}),
查询：（）=>({
我：（）=>({
id:（）=>1，
电邮:'testuser@test.jp',
用户名：“hiro1107”，
名字：“Atsuhiro”，
姓：“Teshima”，
生物：“测试”，
网站：'https://www.test.jp',
__typename:（）=>“学生”
})
})
}
const schema=makeExecutableSchema({
typeDefs，
解析程序：类型解析程序
})
addMockFunctionsToSchema({
模式，
嘲弄，
保存解析程序：true
});
const client=buildMockedClient（模式）；
constuserquery=gql`
质疑{
我{
身份证件
电子邮件
用户名
名字
姓
生物
网站
}
}
`
storiesOf（'帐户设置'，模块）
.addDecorator（故事=>(
{story（）}
))
.add（'带模拟'，（）=>(
));

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 />
  ));