apollographql / react-apollo

:recycle: React integration for Apollo Client
https://www.apollographql.com/docs/react/
MIT License
6.85k stars 787 forks source link

MockedProvider not returning anything #3967

Open MarkLyck opened 4 years ago

MarkLyck commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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(),
})
    <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 commented 4 years ago

This sounds more like a workaround than a solution 😰

But thanks for sharing!

sgentile commented 4 years ago

I'm having the same issue

macrozone commented 4 years ago

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

stopped working with 3.1.4.

3.1.3 is working fine