apollographql / apollo-client

:rocket:  A fully-featured, production ready caching GraphQL client for every UI framework and GraphQL server.
https://apollographql.com/client
MIT License
19.38k stars 2.66k forks source link

IntrospectionFragmentMatcher does not seem to function in v2 #2303

Closed gajus closed 7 years ago

gajus commented 7 years ago

Initialization of the client:

// @flow

import {
  ApolloClient
} from 'apollo-client';
import {
  HttpLink
} from 'apollo-link-http';
import {
  InMemoryCache,
  IntrospectionFragmentMatcher
} from 'apollo-cache-inmemory';

const fragmentMatcher = new IntrospectionFragmentMatcher({
  introspectionQueryResultData: {
    // eslint-disable-next-line id-match
    __schema: {
      types: [
        {
          kind: 'INTERFACE',
          name: 'Paragraph',
          possibleTypes: [
            {
              name: 'TextParagraph'
            },
            {
              name: 'ImageParagraph'
            }
          ]
        },
        {
          kind: 'INTERFACE',
          name: 'Markup',
          possibleTypes: [
            {
              name: 'DecorationMarkup'
            },
            {
              name: 'LinkMarkup'
            }
          ]
        }
      ]
    }
  }
});

const apolloClient = new ApolloClient({
  cache: new InMemoryCache({
    fragmentMatcher: fragmentMatcher.match
  }),
  link: new HttpLink({
    credentials: 'include',
    uri: '/api'
  })
});

export default apolloClient;

Request to retrieve a resource:

export const getStory = async (articleId: string): Promise<StoryType> => {
  const query: any = gql`
    query getArticleById (
      $articleId: ID!
    ) {
      getArticleById(id: $articleId) {
        id
        headline
        alternativeHeadline
        publishedAt
        author {
          id
          givenName
          familyName
          bio
          email
        }
        paragraphs {
          ... on Paragraph {
            id
            type
            text
            markups {
              ... on Markup {
                id
                type
                start
                end
              }
              ... on LinkMarkup {
                url
              }
            }
          }
          ... on ImageParagraph {
            image {
              height
              id
              url
              width
            }
          }
        }
      }
      __schema {
        types {
          kind
          name
          possibleTypes {
            name
          }
        }
      }
    }
  `;

  const result = await graphqlClient.query({
    query,
    variables: {
      articleId
    }
  });

  return result.data.getArticleById;
};

Intended outcome:

result.data.getArticleById is expected to contain the data described in the API response.

Actual outcome:

result is:

{
  data:null,
  loading:false,
  networkStatus:7,
  stale:true
}

Meanwhile, the actual API response is:

{"data":{"getArticleById":{"id":"10","headline":"The book, the movie & the audience","alternativeHeadline":"How language and technology can change the movie watching experience forever","publishedAt":1506951631,"author":{"id":"1","givenName":"Gajus","familyName":"Kuizinas","bio":"Movie buff, founder of GO2CINEMA, software architect.","email":"gajus@go2cinema.com","__typename":"ArticleAuthor"},"paragraphs":[{"id":"497","type":"TEXT","text":"The rapid advancement in technology keeps on surprising us all. Watching a movie is no longer the same as it was before, and technology has brought our favourite books, shows and movies into the palms of our hands.","markups":[],"__typename":"TextParagraph"},{"id":"498","type":"TEXT","text":"While science may have solved the question “Who came first: the chicken or the egg” (answer: the egg), one conflict still remains prevalent, raging on media, sparking debates and dividing us all — is the book better, or the movie?","markups":[{"id":"107","type":"LINK","start":93,"end":100,"__typename":"LinkMarkup","url":"https://en.wikipedia.org/wiki/Chicken_or_the_egg"}],"__typename":"TextParagraph"},{"id":"499","type":"IMAGE","text":"Is the book better or the movie?","markups":[],"__typename":"ImageParagraph","image":{"height":900,"id":"35","url":"https://go2cinema.com/images/stories/35.jpg","width":1600,"__typename":"ImageParagraphImage"}},{"id":"500","type":"TEXT","text":"Social media sites are full of memes and articles regarding books and adaptations of the books, several people claiming that movies are nowhere on a par with the “book experience”. Many complain that when a movie based on a book ends up being released, it’s often so different from what the reader perceived it’s almost no fun at all.","markups":[],"__typename":"TextParagraph"},{"id":"501","type":"TEXT","text":"All of this, it seems, is about to change soon.","markups":[],"__typename":"TextParagraph"},{"id":"502","type":"TEXT","text":"Thanks to research presented in the IEEE International Conference on Computer Vision (ICCV) by Zhu et al (2015), if the text of a book is aligned with the dialogues of a movie, the experience gained is phenomenal! Not only does it leave room for the reader to imagine some scenes through text, but also aligns the text to movie dialogues in a way that makes it a story-like.","markups":[{"id":"108","type":"LINK","start":10,"end":18,"__typename":"LinkMarkup","url":"https://www.cv-foundation.org/openaccess/content_iccv_2015/html/Zhu_Aligning_Books_and_ICCV_2015_paper.html"},{"id":"109","type":"LINK","start":36,"end":40,"__typename":"LinkMarkup","url":"https://www.ieee.org/"},{"id":"110","type":"LINK","start":41,"end":84,"__typename":"LinkMarkup","url":"http://iccv2017.thecvf.com/"}],"__typename":"TextParagraph"},{"id":"503","type":"IMAGE","text":"Books that gave a birth to movies","markups":[],"__typename":"ImageParagraph","image":{"height":864,"id":"36","url":"https://go2cinema.com/images/stories/36.jpg","width":1411,"__typename":"ImageParagraphImage"}},{"id":"504","type":"TEXT","text":"Many famous and well written stories from books have been displayed in the visual form on cinema screens. These books and the movies that have been released have a lot of knowledge common and also complement each other. While books provide us detailed descriptions regarding the intentions or mental states of characters, movies capture visual aspects of the story and settings in a better way.","markups":[],"__typename":"TextParagraph"},{"id":"505","type":"TEXT","text":"Books, a rich source of information that is fine-grained, giving details of what a character looks like and what the scene or an object is like, also serve as a source of high-level semantics. The “high-level semantics” explain what a character is thinking, how he/she feels and how all the states evolve as the story progresses. The research has aimed to align books and their movie releases so as to provide rich and descriptive explanations for the visual content.","markups":[],"__typename":"TextParagraph"},{"id":"506","type":"H4","text":"Production of a “smart” machine that can achieve this might soon be on the way","markups":[],"__typename":"TextParagraph"},{"id":"507","type":"TEXT","text":"A truly intelligent or smart machine shall need to parse surrounding 3D environment. For the product to understand and monitor the reasons why people take specific actions, what they might tend to do next, what they were possibly thinking, and to try and empathize with them, language shall play a crucial role. It will help the machine in process of grounding visual information with high-level semantic concepts. This is possible because only a few words in a sentence really do convey rich semantic information.","markups":[],"__typename":"TextParagraph"},{"id":"508","type":"TEXT","text":"The action of combining images and videos with language has sparked a significant amount of attention in the past year. While for a long time it has been apparent that viewers liked movies that shared language with the book in the form of dialogues, the introduction of CoCo (Common Object in Context) actually brought research into the domain of practical application of this knowledge.","markups":[{"id":"111","type":"LINK","start":270,"end":274,"__typename":"LinkMarkup","url":"http://cocodataset.org/"},{"id":"112","type":"ITALIC","start":194,"end":201,"__typename":"DecorationMarkup"}],"__typename":"TextParagraph"},{"id":"509","type":"TEXT","text":"The first challenge that would be needed to address in this process is how the books and movie releases could be aligned so that viewers could obtain rich and satisfying descriptions for the content. The research has aimed to align the two sources (books and movies) with two information types: visual, where a movie shot is linked to a paragraph in the book, and dialog, where correspondences were found between the sentences in a movie’s subtitle and the book’s sentences.","markups":[{"id":"113","type":"ITALIC","start":71,"end":75,"__typename":"DecorationMarkup"}],"__typename":"TextParagraph"},{"id":"510","type":"TEXT","text":"It would be hard and challenging to achieve this because the scale of data is large. On average, each movie is about 2h long and it has 1,800 shots. On the other hand, a book on average has about 7,750 sentences. A book also has different writing styles, language, formatting, and it may even contain slang (going vs goin’), etc. It can be seen in Table 1 how challenging it was to find visual matches.","markups":[],"__typename":"TextParagraph"},{"id":"511","type":"IMAGE","text":"Table 1: Statistics for our MovieBook Dataset with ground-truth for alignment between books and their movie releases.","markups":[{"id":"114","type":"BOLD","start":28,"end":45,"__typename":"DecorationMarkup"}],"__typename":"ImageParagraph","image":{"height":734,"id":"37","url":"https://go2cinema.com/images/stories/37.png","width":2804,"__typename":"ImageParagraphImage"}},{"id":"512","type":"TEXT","text":"Descriptions in books might either be very short and precise, hidden within the longer paragraphs or within a longer sentence, or it might be very verbose (obscured with the surrounding text). This makes the descriptions hard to spot. Of course, how similar the book and movie are or how close the movie has followed the book is up to the director. This was seen through the alignments that annotators found across different movie/books, shown in Table 2.","markups":[],"__typename":"TextParagraph"},{"id":"513","type":"IMAGE","text":"Table 2: Summary statistics of our BookCorpus dataset. We use this corpus to train the sentence embedding model.","markups":[{"id":"115","type":"BOLD","start":35,"end":45,"__typename":"DecorationMarkup"}],"__typename":"ImageParagraph","image":{"height":124,"id":"38","url":"https://go2cinema.com/images/stories/38.png","width":2752,"__typename":"ImageParagraphImage"}},{"id":"514","type":"TEXT","text":"However, a context-aware alignment model was proposed by the research that may somewhere, in the future, help provide an amazing experience to us by defining, finding and embedding similarities in books and movies together. This would help the reader view the descriptions from the movie in the best possible manner.","markups":[],"__typename":"TextParagraph"},{"id":"515","type":"TEXT","text":"So we can safely say that while the book and movie may not be the same, they can together help make the stories better!","markups":[{"id":"116","type":"ITALIC","start":80,"end":89,"__typename":"DecorationMarkup"}],"__typename":"TextParagraph"}],"__typename":"Article"},"__schema":{"types":[{"kind":"OBJECT","name":"Query","possibleTypes":null},{"kind":"SCALAR","name":"ID","possibleTypes":null},{"kind":"OBJECT","name":"Affiliate","possibleTypes":null},{"kind":"SCALAR","name":"String","possibleTypes":null},{"kind":"OBJECT","name":"AffiliateReservationsConnection","possibleTypes":null},{"kind":"INTERFACE","name":"Connection","possibleTypes":[{"name":"AffiliateReservationsConnection"},{"name":"VenueReviewsConnection"},{"name":"CreditsConnection"},{"name":"MovieReviewsConnection"},{"name":"MovieReviewPublisherReviewsConnection"},{"name":"VenuesConnection"},{"name":"EventsConnection"},{"name":"MoviesWithEventsConnection"},{"name":"ArticlesConnection"},{"name":"MoviesConnection"}]},{"kind":"OBJECT","name":"PageInfo","possibleTypes":null},{"kind":"SCALAR","name":"Boolean","possibleTypes":null},{"kind":"OBJECT","name":"AffiliateReservationsEdge","possibleTypes":null},{"kind":"INTERFACE","name":"Edge","possibleTypes":[{"name":"AffiliateReservationsEdge"},{"name":"VenueReviewsEdge"},{"name":"CreditsEdge"},{"name":"MovieReviewsEdge"},{"name":"MovieReviewPublisherReviewsEdge"},{"name":"VenuesEdge"},{"name":"EventsEdge"},{"name":"MoviesWithEventsEdge"},{"name":"ArticlesEdge"},{"name":"MoviesEdge"}]},{"kind":"OBJECT","name":"AffiliateReservation","possibleTypes":null},{"kind":"INTERFACE","name":"Node","possibleTypes":[{"name":"AffiliateReservation"},{"name":"Reservation"},{"name":"Event"},{"name":"Venue"},{"name":"VenueRating"},{"name":"Movie"},{"name":"MovieRating"},{"name":"MovieReviewPublisherReview"},{"name":"MovieReviewPublisher"},{"name":"MovieReviewPublisherReviewAuthor"},{"name":"MovieReviewPublisherReviewRating"},{"name":"Ticket"},{"name":"Currency"},{"name":"ReservationConfirmation"},{"name":"Application"},{"name":"Article"},{"name":"ImageParagraphImage"}]},{"kind":"OBJECT","name":"Reservation","possibleTypes":null},{"kind":"OBJECT","name":"Event","possibleTypes":null},{"kind":"OBJECT","name":"Venue","possibleTypes":null},{"kind":"OBJECT","name":"AlternativeId","possibleTypes":null},{"kind":"ENUM","name":"AlternativeIdName","possibleTypes":null},{"kind":"OBJECT","name":"PriceRange","possibleTypes":null},{"kind":"SCALAR","name":"Int","possibleTypes":null},{"kind":"OBJECT","name":"AggregateRating","possibleTypes":null},{"kind":"SCALAR","name":"Float","possibleTypes":null},{"kind":"OBJECT","name":"Auditorium","possibleTypes":null},{"kind":"OBJECT","name":"SeatingPlan","possibleTypes":null},{"kind":"OBJECT","name":"Seat","possibleTypes":null},{"kind":"OBJECT","name":"SeatType","possibleTypes":null},{"kind":"OBJECT","name":"Address","possibleTypes":null},{"kind":"OBJECT","name":"Country","possibleTypes":null},{"kind":"ENUM","name":"CountryCode","possibleTypes":null},{"kind":"OBJECT","name":"Locality","possibleTypes":null},{"kind":"OBJECT","name":"Cinema","possibleTypes":null},{"kind":"OBJECT","name":"Logo","possibleTypes":null},{"kind":"OBJECT","name":"Coordinates","possibleTypes":null},{"kind":"OBJECT","name":"VenueReviewsConnection","possibleTypes":null},{"kind":"OBJECT","name":"VenueReviewsEdge","possibleTypes":null},{"kind":"OBJECT","name":"VenueReview","possibleTypes":null},{"kind":"OBJECT","name":"User","possibleTypes":null},{"kind":"OBJECT","name":"VenueRating","possibleTypes":null},{"kind":"INTERFACE","name":"Rating","possibleTypes":[{"name":"VenueRating"},{"name":"MovieRating"},{"name":"MovieReviewPublisherReviewRating"}]},{"kind":"OBJECT","name":"Movie","possibleTypes":null},{"kind":"OBJECT","name":"Genre","possibleTypes":null},{"kind":"OBJECT","name":"CreditsConnection","possibleTypes":null},{"kind":"OBJECT","name":"CreditsEdge","possibleTypes":null},{"kind":"OBJECT","name":"Character","possibleTypes":null},{"kind":"OBJECT","name":"Person","possibleTypes":null},{"kind":"OBJECT","name":"MovieReviewsConnection","possibleTypes":null},{"kind":"OBJECT","name":"MovieReviewsEdge","possibleTypes":null},{"kind":"OBJECT","name":"MovieReview","possibleTypes":null},{"kind":"OBJECT","name":"MovieRating","possibleTypes":null},{"kind":"OBJECT","name":"MovieReviewPublisherReviewsConnection","possibleTypes":null},{"kind":"OBJECT","name":"MovieReviewPublisherReviewsEdge","possibleTypes":null},{"kind":"OBJECT","name":"MovieReviewPublisherReview","possibleTypes":null},{"kind":"OBJECT","name":"MovieReviewPublisher","possibleTypes":null},{"kind":"OBJECT","name":"MovieReviewPublisherReviewAuthor","possibleTypes":null},{"kind":"OBJECT","name":"MovieReviewPublisherReviewRating","possibleTypes":null},{"kind":"OBJECT","name":"Director","possibleTypes":null},{"kind":"OBJECT","name":"Ticket","possibleTypes":null},{"kind":"OBJECT","name":"Currency","possibleTypes":null},{"kind":"OBJECT","name":"TicketType","possibleTypes":null},{"kind":"OBJECT","name":"EventAttribute","possibleTypes":null},{"kind":"INPUT_OBJECT","name":"AffiliateInput","possibleTypes":null},{"kind":"OBJECT","name":"TicketReservationFee","possibleTypes":null},{"kind":"OBJECT","name":"ReservationConfirmation","possibleTypes":null},{"kind":"OBJECT","name":"Barcode","possibleTypes":null},{"kind":"ENUM","name":"ReservationStatus","possibleTypes":null},{"kind":"OBJECT","name":"PurchaseOrder","possibleTypes":null},{"kind":"INTERFACE","name":"Payment","possibleTypes":[{"name":"PaymentCardPayment"}]},{"kind":"ENUM","name":"PaymentTypeName","possibleTypes":null},{"kind":"ENUM","name":"PurchaseOrderStatus","possibleTypes":null},{"kind":"OBJECT","name":"Application","possibleTypes":null},{"kind":"OBJECT","name":"Visitor","possibleTypes":null},{"kind":"OBJECT","name":"Geolocation","possibleTypes":null},{"kind":"INPUT_OBJECT","name":"CoordinatesInput","possibleTypes":null},{"kind":"OBJECT","name":"VenuesConnection","possibleTypes":null},{"kind":"OBJECT","name":"VenuesEdge","possibleTypes":null},{"kind":"OBJECT","name":"EventsConnection","possibleTypes":null},{"kind":"OBJECT","name":"EventsEdge","possibleTypes":null},{"kind":"OBJECT","name":"MoviesWithEventsConnection","possibleTypes":null},{"kind":"OBJECT","name":"MoviesWithEventsEdge","possibleTypes":null},{"kind":"OBJECT","name":"ArticlesConnection","possibleTypes":null},{"kind":"OBJECT","name":"ArticlesEdge","possibleTypes":null},{"kind":"OBJECT","name":"Article","possibleTypes":null},{"kind":"OBJECT","name":"ArticleAuthor","possibleTypes":null},{"kind":"INTERFACE","name":"Paragraph","possibleTypes":[{"name":"TextParagraph"},{"name":"ImageParagraph"}]},{"kind":"ENUM","name":"ParagraphType","possibleTypes":null},{"kind":"INTERFACE","name":"Markup","possibleTypes":[{"name":"DecorationMarkup"},{"name":"LinkMarkup"}]},{"kind":"ENUM","name":"MarkupType","possibleTypes":null},{"kind":"OBJECT","name":"ImageParagraphImage","possibleTypes":null},{"kind":"OBJECT","name":"MoviesConnection","possibleTypes":null},{"kind":"OBJECT","name":"MoviesEdge","possibleTypes":null},{"kind":"OBJECT","name":"Mutation","possibleTypes":null},{"kind":"INPUT_OBJECT","name":"PaymentMethodInput","possibleTypes":null},{"kind":"ENUM","name":"PaymentMethodInputType","possibleTypes":null},{"kind":"OBJECT","name":"Subscriber","possibleTypes":null},{"kind":"OBJECT","name":"__Schema","possibleTypes":null},{"kind":"OBJECT","name":"__Type","possibleTypes":null},{"kind":"ENUM","name":"__TypeKind","possibleTypes":null},{"kind":"OBJECT","name":"__Field","possibleTypes":null},{"kind":"OBJECT","name":"__InputValue","possibleTypes":null},{"kind":"OBJECT","name":"__EnumValue","possibleTypes":null},{"kind":"OBJECT","name":"__Directive","possibleTypes":null},{"kind":"ENUM","name":"__DirectiveLocation","possibleTypes":null},{"kind":"OBJECT","name":"DecorationMarkup","possibleTypes":null},{"kind":"OBJECT","name":"LinkMarkup","possibleTypes":null},{"kind":"OBJECT","name":"TextParagraph","possibleTypes":null},{"kind":"OBJECT","name":"ImageParagraph","possibleTypes":null},{"kind":"OBJECT","name":"PaymentCard","possibleTypes":null},{"kind":"OBJECT","name":"PaymentCardPayment","possibleTypes":null}]}}}

How to reproduce the issue:

N/A

Version

jbaxleyiii commented 7 years ago

@gajus change

cache: new InMemoryCache({
    fragmentMatcher: fragmentMatcher.match
  }),

to

cache: new InMemoryCache({ fragmentMatcher }),

You don't need to pass the .match. Also the inmemory-cache now has an rc too!

gajus commented 7 years ago

You don't need to pass the .match. Also the inmemory-cache now has an rc too!

I did try that at first ... it gave an error.

gajus commented 7 years ago

It works now.