[Bug?]: MockGraphQLQuery not working when original query uses fragments about redwood HOT 10 CLOSED

I would have never thought of that

We didn't either -- until we found that issue and then it actually makes perfect sense.

Under the covers RedwoodJS replies on https://www.apollographql.com/docs/react/data/fragments/#usefragment and we think that needs to know the type to properly match up data with the fragment in the query.

from redwood.

Okay it's working!, closing this know. Great work the RedwoodJS team is amazing

from redwood.

Hi @irg1008 thanks to @arimendelow we think we figured it out. Ignore the updates I made to your reproduction repo as having the two cells with the two queries can confuse the issue. but try using:

// Define your own mock data here:
export const standard = (/* vars, { ctx, req } */) => ({
  chatMessages: Array.from({ length: 20 }, (_, index) => ({
    __typename: 'ChatMessage',
    body: `Message${index + 1}`,
    createdAt: '2021-07-01T00:00:00.000Z',
    id: index + 1,
    user: {
      __typename: 'ChatUser',
      displayName: `User ${(index % 5) + 1}`, // Cycle through 5 different users
      id: (index % 5) + 1,
    },
    chatRoomId: '42',
  })) satisfies ChatMessage[],
})

in ChatCell.mock.ts.

Notice the __typename in the data to note what the GraphQL types are. This appears to be needed so that Apollo can understand have to use the fragments and map the data coming back.

Some more info in: mswjs/msw#630

Can you see if that works for you?

We'll update the Fragment docs (or if you feel like making a docs PR, that'd be amazing) and then think about how this might be done more transparently. But it is good practice I guess to include the typenames since that in fact does come back in real-world cases from Yoga.

from redwood.

Oh my god I would have never thought of that, will try it tomorrow and let you know. And will happily make the PR to the fragment docs. Thanks!

from redwood.

Hi @irg1008 and thanks for writing up this issue — I’ll have to recreate it with. Small reproduction.

One question: for the log output of your mock is that from running a test or using storybook?

from redwood.

Sorry should have said. It's Storybook. If need me to create a small repo please say so

from redwood.

If need me to create a small repo please say so

If you could, that would be really helpful for me to reproduce and know we are seeing the same thing.

Thanks!

from redwood.

Okay there you go: https://github.com/irg1008/issue-redwood-fragments-storybook.git

1. Install (yarn install, etc)
2. yarn rw dev
3. yarn rw storybook
4. Open storybook > Components > Chat: See that IS WORKING
5. Go to ChatCell.tsx
6. Uncomment and comment to swap to using fragment
7. Open storybook > Components > Chat: NOT WORKING

from redwood.

Hi @irg1008 I forked and made PR on your demo repo here: irg1008/issue-redwood-fragments-storybook#1

The cells themselves appear to mock ok, but when the cell is then used in a component (or maybe even a page) and that story then doesn't appear to "pass along" the mocked data so to speak. Am investigating still.

from redwood.

I just merged it. If you need any help I am starting to learn the redwood repo I can help

from redwood.