Apollo-client: How to add cache fragment in different Query?

Viewed 29

when I create feed in Screen A,

I add and in order to apply this change to screen directly I change cache like below.

in this Screen A, I use seeAllFeeds query.

So I add this added feed to seeAllFeeds.

  const updateUploadPhoto = (cache, result) => {
    const {
      data: { createFeed },
    } = result;
    if (createFeed.id) {
      cache.modify({
        id: "ROOT_QUERY",
        fields: {
          seeAllFeeds(prev) {
            return [createFeed, ...prev];
          },
        },
      });
    }
  }

So it works well.

But problem is I use seeCertainUserFeedpoem query in Screen B.

And here, I also need to add this added feed info.

However this screen is not applied unless I refresh the screen.

(Due to flatlist, I can't refresh because if so, scroll goes to top.)

So I add this cache.modify once again below.

I also match the data with seeCertainUserFeedpoem manually and update.

    const updateUploadPhoto = (cache, result) => {
        const {
          data: { createFeed },
        } = result;
        const FeedpomeId = `Feedpoem:${createFeed.id}`;
        const FeedpoemFragment = {
          caption: createFeed.caption,
          commentNumber: createFeed.commentNumber,
          createdAt: createFeed.createdAt,
          id: createFeed.id,
          isLiked: createFeed.isLiked,
          isMine: createFeed.isMine,
          likeNumber: createFeed.likeNumber,
          photos: createFeed.photos,
          poemCaption: null,
          poemCommentNumber: 0,
          poemLikeNumber: 0,
          poemTitle: null,
          updatedAt: createFeed.updatedAt,
        };
        if (createFeed.id) {
          cache.modify({
            id: "ROOT_QUERY",
            fields: {
              seeAllFeeds(prev) {
                return [createFeed, ...prev];
              },
            },
          });
          cache.modify({
            id: FeedpomeId,
            data: FeedpoemFragment,
          });
    
          navigation.navigate("Tabs", { screen: "일상" });
        }
      };

So I also try this way, not cache.modify but client.writeFragment.

  const updateUploadPhoto = (cache, result) => {
    const {
      data: { createFeed },
    } = result;
    const FeedpomeId = `Feedpoem:${createFeed.id}`;
    const FeedpoemFragment = {
      caption: createFeed.caption,
      commentNumber: createFeed.commentNumber,
      createdAt: createFeed.createdAt,
      id: createFeed.id,
      isLiked: createFeed.isLiked,
      isMine: createFeed.isMine,
      likeNumber: createFeed.likeNumber,
      photos: createFeed.photos,
      poemCaption: null,
      poemCommentNumber: 0,
      poemLikeNumber: 0,
      poemTitle: null,
      updatedAt: createFeed.updatedAt,
    };
    if (createFeed.id) {
      cache.modify({
        id: "ROOT_QUERY",
        fields: {
          seeAllFeeds(prev) {
            return [createFeed, ...prev];
          },
        },
      });
      client.writeFragment({
        id: FeedpomeId,
        data: FeedpoemFragment,
      });

      navigation.navigate("Tabs", { screen: "일상" });
    }
  };

But both dont' work.

And 2nd way throws me this error.

LogBox.js:173 Possible Unhandled Promise Rejection (id: 0): Error: Cannot read properties of undefined (reading 'definitions') Error: Cannot read properties of undefined (reading 'definitions')

what is the problem here?

I can edit / delete with cache.

Because I understand that first find the exact cache by id.

However creating is hard.

I want to share my cache as well.

But this is too long.

chat is also welcome, please help me.

0 Answers
Related