remove graphql-tools and @miragejs/graphql workaround (#13)

.prettierignore

@@ -3,4 +3,5 @@ dist/
 .yarn/
 storybook-static/
 .coverage
+tsconfig.json
 __generated__/

package.json

@@ -67,6 +67,7 @@
     "@types/react-transition-group": "^4.4.0",
     "@types/video.js": "^7.3.10",
     "apollo": "^2.30.2",
+    "babel-jest": "26.6.3",
     "babel-plugin-emotion": "^10.0.33",
     "csstype": "^3.0.0-beta.4",
     "customize-cra": "^1.0.0",
@@ -82,7 +83,7 @@
     "glider-js": "^1.7.3",
     "graphql": "^15.3.0",
     "graphql-tag": "^2.11.0",
-    "graphql-tools": "^6.2.4",
+    "graphql-tools": "^7.0.2",
     "husky": "^4.2.5",
     "lint-staged": "^10.2.7",
     "lodash": "^4.17.19",

src/api/client/cache.ts

@@ -29,9 +29,6 @@ const cache = new InMemoryCache({
       },
     },
   },
-  possibleTypes: {
-    FreeTextSearchResultItemType: ['Video', 'Channel'],
-  },
 })
 
 export default cache

src/api/client/executors.ts

@@ -1,22 +1,9 @@
-import { print } from 'graphql'
 import { ORION_GRAPHQL_URL, QUERY_NODE_GRAPHQL_URL } from '@/config/urls'
-import { Executor } from '@graphql-tools/delegate'
+import { HttpLink } from '@apollo/client'
+import { linkToExecutor } from '@graphql-tools/links'
 
-// TODO: Switch back to using Apollo HTTP links with `linkToExecutor`
-// That can be done once the following issues are resolved:
-// https://github.com/ardatan/graphql-tools/issues/2105
-// https://github.com/ardatan/graphql-tools/issues/2111
-const buildExecutor = (uri: string): Executor => async ({ document, variables }) => {
-  const query = print(document)
-  const fetchResult = await fetch(uri, {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify({ query, variables }),
-  })
-  return fetchResult.json()
-}
+const queryNodeLink = new HttpLink({ uri: QUERY_NODE_GRAPHQL_URL })
+const orionLink = new HttpLink({ uri: ORION_GRAPHQL_URL })
 
-export const queryNodeExecutor = buildExecutor(QUERY_NODE_GRAPHQL_URL)
-export const orionExecutor = buildExecutor(ORION_GRAPHQL_URL)
+export const queryNodeExecutor = linkToExecutor(queryNodeLink)
+export const orionExecutor = linkToExecutor(orionLink)

src/api/client/transforms/orionViews.ts

@@ -1,4 +1,4 @@
-import { Transform } from '@graphql-tools/utils'
+import { Transform } from '@graphql-tools/delegate'
 import { GraphQLError, SelectionSetNode } from 'graphql'
 
 class OrionError extends Error {

src/api/client/transforms/queryNodeViews.ts

@@ -1,4 +1,4 @@
-import { Transform } from '@graphql-tools/utils'
+import { Transform } from '@graphql-tools/delegate'
 
 // remove views field from the query node video request
 export const RemoveQueryNodeViewsField: Transform = {

src/mocking/server/index.ts

@@ -34,13 +34,6 @@ createServer({
           channelsConnection: channelsResolver,
           search: searchResolver,
         },
-        // TODO: remove these once the MirageJS bug gets resolved: https://github.com/miragejs/graphql/issues/16
-        SearchFTSOutput: {
-          item: ({ item }: any) => item,
-        },
-        VideoMedia: {
-          location: ({ location }: any) => location,
-        },
       },
     })
 

src/mocking/server/resolvers.ts

@@ -1,5 +1,4 @@
 import { mirageGraphQLFieldResolver } from '@miragejs/graphql'
-import { getRecords } from '@miragejs/graphql/lib/orm/records'
 import { FEATURED_VIDEOS_INDEXES } from '@/mocking/data'
 import { Search_search, SearchVariables } from '@/api/queries/__generated__/Search'
 import { VideoFields } from '@/api/queries/__generated__/VideoFields'
@@ -89,35 +88,50 @@ export const channelsResolver: QueryResolver<GetNewestChannelsVariables, GetNewe
   return paginatedChannels
 }
 
-// FIXME: This resolver is currently broken and returns the same result n times instead of the correct result.
-export const searchResolver: QueryResolver<SearchVariables, Search_search[]> = (_, { text }, context) => {
+type VideoModel = { attrs: VideoFields }
+type ChannelModel = { attrs: ChannelFields }
+type SearchResolverResult = Omit<Search_search, 'item'> & { item: VideoModel | ChannelModel }
+
+export const searchResolver: QueryResolver<SearchVariables, SearchResolverResult[]> = (_, { text }, context) => {
   const { mirageSchema: schema } = context
-  const videos = getRecords({ name: 'Video' }, {}, schema) as VideoFields[]
-  const channels = getRecords({ name: 'Channel' }, {}, schema) as ChannelFields[]
 
-  const items = [...videos, ...channels]
+  const videos = schema.videos.all().models as VideoModel[]
+  const channels = schema.channels.all().models as ChannelModel[]
 
   let rankCount = 0
   const matchQueryStr = (str: string) => str.includes(text) || text.includes(str)
 
-  const relevantItems = items.reduce((acc, item) => {
-    const matched =
-      item.__typename === 'Channel'
-        ? matchQueryStr(item.handle)
-        : matchQueryStr(item.description) || matchQueryStr(item.title)
+  const matchedVideos = videos.reduce((acc, video) => {
+    const matched = matchQueryStr(video.attrs.description) || matchQueryStr(video.attrs.title)
+    if (!matched) {
+      return acc
+    }
+
+    const result: SearchResolverResult = {
+      __typename: 'SearchFTSOutput',
+      item: video,
+      rank: rankCount++,
+    }
+
+    return [...acc, result]
+  }, [] as SearchResolverResult[])
+
+  const matchedChannels = channels.reduce((acc, channel) => {
+    const matched = matchQueryStr(channel.attrs.handle)
     if (!matched) {
       return acc
     }
 
-    const result: Search_search = {
+    const result: SearchResolverResult = {
       __typename: 'SearchFTSOutput',
-      item,
+      item: channel,
       rank: rankCount++,
     }
 
     return [...acc, result]
-  }, [] as Search_search[])
-  return relevantItems
+  }, [] as SearchResolverResult[])
+
+  return [...matchedVideos, ...matchedChannels]
 }
 
 type VideoViewsArgs = {

tsconfig.json

@@ -2,7 +2,11 @@
   "extends": "./tsconfig.paths.json",
   "compilerOptions": {
     "target": "es2019",
-    "lib": ["dom", "dom.iterable", "es2019"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "es2019"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
@@ -18,6 +22,12 @@
     "jsx": "react",
     "noFallthroughCasesInSwitch": true
   },
-  "exclude": ["node_modules", "dist", "src/shared/stories"],
-  "include": ["src"]
+  "exclude": [
+    "node_modules",
+    "dist",
+    "src/shared/stories"
+  ],
+  "include": [
+    "src"
+  ]
 }