React-apollo: MockedProvider not returning anything

[MarkLyck]

Using MockedProvider in Storybook doesn't seem to return anything.

When wrapping my component in the MockedProvider, it no longer throws an error that there's no Apollo client. So this proves that the MockProvider "works"

Intended outcome:

The following hook should return the data that's in the mock:

const { loading, error, data } = useQuery(LATEST_SELL_SIGNALS)

Actual outcome:

loading is true on first render and false on the second render
data is undefined
error is undefined

How to reproduce the issue:

Example story:

import React from 'react'
import { MockedProvider } from '@apollo/react-testing'

import { LATEST_SELL_SIGNALS } from '~/common/queries'
import LatestSells from './LatestSells'

const mocks = [
  {
    request: {
      query: LATEST_SELL_SIGNALS,
    },
    result: {
      data: {
        yourData: { name: 'Storybook Data' },
      },
    },
  },
]


export default {
  title: 'Sales Components'
}

export const latest_sells = () => {
  return (
      <MockedProvider mocks={mocks}>
        <LatestSells />
      </MockedProvider>
  )
}

Where the LATEST_SELL_SIGNALS is this file:

import { gql } from 'apollo-boost'

export const LATEST_SELL_SIGNALS = gql`
  query {
    latestSellSignalsList(orderBy: createdAt_DESC, first: 10) {
      items {
        name
        ticker
        boughtAt
        soldAt
      }
    }
  }
`

the Component I'm wrapping is using react hooks like this:

const { loading, error, data } = useQuery(LATEST_SELL_SIGNALS)

The import for the query is the same in the Component as it is in the mock

please note this all works just fine with my normal Apollo Provider, I'm only having issues with the MockProvider not doing it's thing.

The component. also renders fine

Version
3.1.4

[airxiaotian]

I suffer the same problem, but I get the correct error returned.

const mocks = [
 {
    request: {
      query: MOCK_QUERY,
      variables: { id: 1 },
    },
    result: {
      data: {
       ......some data
      },
      refetch: () => console.log('refetch mocked'),
    },
  },
  {
    request: {
      query: MOCK_QUERY,
      variables: { id: 2 },
    },
    error: new Error('somethine went wrong'),
  }, 
]

when
variables: { id: 1 },
data is undefined
but when
variables: { id: 2 },
it return a network error and the message is "somethine went wrong"

[airxiaotian]

I suffer the same problem, but I get the correct error returned.

const mocks = [
 {
    request: {
      query: MOCK_QUERY,
      variables: { id: 1 },
    },
    result: {
      data: {
       ......some data
      },
      refetch: () => console.log('refetch mocked'),
    },
  },
  {
    request: {
      query: MOCK_QUERY,
      variables: { id: 2 },
    },
    error: new Error('somethine went wrong'),
  }, 
]

when
variables: { id: 1 },
data is undefined
but when
variables: { id: 2 },
it return a network error and the message is "somethine went wrong"

I solved it by adding
addTypename={false}
to the MockedProvider

[AdiBevoor]

Having same issue here.

const mock = [
  {
    request: {
      query: QUERY,
    },
    result: {
      data: {
        id: "1233",
        name: "BMW",
        logoUrl: "http://gfgfg.com",
      },
    },
    error: new Error("somethine went wrong"),
  },
];

 <MockedProvider mocks={mock} addTypename={false}>
    <MakeLookup />
 </MockedProvider>

The UI is always in loading state doesn't seem to return mock data

[smeevil]

I encounter the same thing.
In my case, I use a subscription query.
The return function logs that it is being called, but the returned data never shows up and loading never changes to false.

Using import { MockedProvider } from '@apollo/client/testing'
and
<MockedProvider mocks={mocks} addTypename={false}>

[smeevil]

It seems mostly an issue with Safari.

If wrap the MockedProvider in an ApolloClient like so:

const client = new ApolloClient({
  link: from([]),
  cache: new InMemoryCache(),
})

tsx <ApolloProvider client={client}> <MockedProvider mocks={mocks} addTypename={false}> <MyComponent /> </MockedProvider> </ApolloProvider>

And load storybook in Safari, it still stays in the loading state. but if you have the inspector open, it works ..._sometimes_... so this might be a timing issue.

When using Chrome, it works just without the wrapping, no matter if the inspector is open or not.

[MarkLyck]

This sounds more like a workaround than a solution 😰

But thanks for sharing!

[sgentile]

I'm having the same issue

[macrozone]

also import { addMocksToSchema } from "@graphql-tools/mock";

stopped working with 3.1.4.

3.1.3 is working fine