From d3a2a1da8e49a142459ef83f4ffe0fa9a225dbf4 Mon Sep 17 00:00:00 2001 From: anuveyatsu Date: Tue, 23 Jun 2020 10:09:19 +0600 Subject: [PATCH] [ckan api + apollo][l]: setup apollo client to connect to actual CKAN API. --- components/search/List.tsx | 26 +++--- components/search/Total.tsx | 9 +- lib/{apolloClient.js => apolloClient.ts} | 33 +++++-- package.json | 6 ++ pages/search.tsx | 31 +++++-- yarn.lock | 111 +++++++++++++++++++++-- 6 files changed, 178 insertions(+), 38 deletions(-) rename lib/{apolloClient.js => apolloClient.ts} (58%) diff --git a/components/search/List.tsx b/components/search/List.tsx index 86e6791e..c8946722 100644 --- a/components/search/List.tsx +++ b/components/search/List.tsx @@ -4,18 +4,17 @@ import { NetworkStatus } from 'apollo-client'; import { useQuery } from '@apollo/react-hooks'; import gql from 'graphql-tag'; -export const DEFAULT_SEARCH_QUERY = gql` - query search($query: SearchQuery!) { - search(query: $query) { +const QUERY = gql` + query search($q: String, $sort: String) { + search(q: $q, sort: $sort) + @rest(type: "Search", path: "package_search?{args}") { result { results { name title - notes organization { name title - description } } } @@ -24,16 +23,13 @@ export const DEFAULT_SEARCH_QUERY = gql` `; export default function List({ variables }) { - const { loading, error, data, fetchMore, networkStatus } = useQuery( - DEFAULT_SEARCH_QUERY, - { - variables, - // Setting this value to true will make the component rerender when - // the "networkStatus" changes, so we are able to know if it is fetching - // more data - notifyOnNetworkStatusChange: true, - } - ); + const { loading, error, data, fetchMore, networkStatus } = useQuery(QUERY, { + variables, + // Setting this value to true will make the component rerender when + // the "networkStatus" changes, so we are able to know if it is fetching + // more data + notifyOnNetworkStatusChange: true, + }); if (error) return ; if (loading) return
Loading
; diff --git a/components/search/Total.tsx b/components/search/Total.tsx index 603651b0..0a77a25a 100644 --- a/components/search/Total.tsx +++ b/components/search/Total.tsx @@ -1,9 +1,10 @@ import { useQuery } from '@apollo/react-hooks'; import gql from 'graphql-tag'; -export const GET_NUMBER_OF_DATASETS = gql` - query search($query: SearchQuery!) { - search(query: $query) { +const QUERY = gql` + query search($q: String, $sort: String) { + search(q: $q, sort: $sort) + @rest(type: "Search", path: "package_search?{args}") { result { count } @@ -12,7 +13,7 @@ export const GET_NUMBER_OF_DATASETS = gql` `; export default function Total({ variables }) { - const { loading, error, data } = useQuery(GET_NUMBER_OF_DATASETS, { + const { loading, error, data } = useQuery(QUERY, { variables, // Setting this value to true will make the component rerender when // the "networkStatus" changes, so we are able to know if it is fetching diff --git a/lib/apolloClient.js b/lib/apolloClient.ts similarity index 58% rename from lib/apolloClient.js rename to lib/apolloClient.ts index d9b588cc..277ca5bb 100644 --- a/lib/apolloClient.js +++ b/lib/apolloClient.ts @@ -2,18 +2,39 @@ import { useMemo } from 'react'; import getConfig from 'next/config'; import { ApolloClient } from 'apollo-client'; import { InMemoryCache } from 'apollo-cache-inmemory'; -import { HttpLink } from 'apollo-link-http'; +import { RestLink } from 'apollo-link-rest'; let apolloClient; +const restLink = new RestLink({ + uri: 'https://demo.ckan.org/api/3/action/', + typePatcher: { + Search: ( + data: any, + outerType: string, + patchDeeper: RestLink.FunctionalTypePatcher + ): any => { + if (data.result != null) { + data.result.__typename = 'SearchResponse'; + + if (data.result.results != null) { + data.result.results = data.result.results.map((item) => { + if (item.organization != null) { + item.organization.__typename = 'Organization'; + } + return { __typename: 'Package', ...item }; + }); + } + } + return data; + }, + }, +}); + function createApolloClient() { const { publicRuntimeConfig } = getConfig(); return new ApolloClient({ - ssrMode: typeof window === 'undefined', - link: new HttpLink({ - uri: publicRuntimeConfig.graphqlEndpoint, // Server URL (must be absolute) - credentials: 'same-origin', // Additional fetch() options like `credentials` or `headers` - }), + link: restLink, cache: new InMemoryCache(), }); } diff --git a/package.json b/package.json index 2528fe37..b3d38363 100644 --- a/package.json +++ b/package.json @@ -16,17 +16,23 @@ "pre-commit": "echo 'formating your changes.....' && prettier --single-quote --write" }, "dependencies": { + "@apollo/client": "^3.0.0-rc.6", "@apollo/react-hooks": "^3.1.5", "apollo-cache-inmemory": "^1.6.6", "apollo-client": "^2.6.10", + "apollo-datasource-rest": "^0.9.2", + "apollo-link": "^1.2.14", "apollo-link-http": "^1.5.17", + "apollo-link-rest": "^0.8.0-beta.0", "apollo-link-schema": "^1.2.5", "bytes": "^3.1.0", "graphql": "^15.1.0", + "graphql-anywhere": "^4.2.7", "graphql-tag": "^2.10.3", "graphql-tools": "^6.0.10", "markdown-it": "^11.0.0", "next": "9.4.2", + "qs": "^6.9.4", "querystring": "^0.2.0", "react": "16.13.1", "react-dom": "16.13.1", diff --git a/pages/search.tsx b/pages/search.tsx index df5c8a1a..6dedc6c5 100644 --- a/pages/search.tsx +++ b/pages/search.tsx @@ -6,7 +6,27 @@ import Head from 'next/head'; import Nav from '../components/home/Nav'; import Form from '../components/search/Form'; import Total from '../components/search/Total'; -import List, { DEFAULT_SEARCH_QUERY } from '../components/search/List'; +import List from '../components/search/List'; +import gql from 'graphql-tag'; + +const QUERY = gql` + query search($q: String, $sort: String) { + search(q: $q, sort: $sort) + @rest(type: "Search", path: "package_search?{args}") { + result { + count + results { + name + title + organization { + name + title + } + } + } + } + } +`; function Search({ variables }) { return ( @@ -27,15 +47,12 @@ function Search({ variables }) { export const getServerSideProps: GetServerSideProps = async (context) => { const query = context.query || {}; - const ckanQuery = utils.convertToCkanSearchQuery(query); + const variables = utils.convertToCkanSearchQuery(query); const apolloClient = initializeApollo(); - const variables = { - query: { q: ckanQuery.q || '' }, - }; - await apolloClient.query({ - query: DEFAULT_SEARCH_QUERY, + const { data } = await apolloClient.query({ + query: QUERY, variables, }); diff --git a/yarn.lock b/yarn.lock index 67cc348b..820eca9d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -46,6 +46,21 @@ dependencies: cross-fetch "3.0.4" +"@apollo/client@^3.0.0-rc.6": + version "3.0.0-rc.6" + resolved "https://registry.yarnpkg.com/@apollo/client/-/client-3.0.0-rc.6.tgz#8bd8de57d7b025ac40d3141fbab383971907b617" + integrity sha512-nHEJ8K8SoaP8mJaPwuREdSc1FY25fIL7yAGyjb3cKTCnEV4cT6fZQg/+aJyKpX7fuqsyxZIKoAWS8Q3WdcGSJg== + dependencies: + "@types/zen-observable" "^0.8.0" + "@wry/equality" "^0.1.9" + fast-json-stable-stringify "^2.0.0" + graphql-tag "^2.10.2" + optimism "^0.12.1" + symbol-observable "^1.2.0" + ts-invariant "^0.4.4" + tslib "^1.10.0" + zen-observable "^0.8.14" + "@apollo/react-common@^3.1.4": version "3.1.4" resolved "https://registry.yarnpkg.com/@apollo/react-common/-/react-common-3.1.4.tgz#ec13c985be23ea8e799c9ea18e696eccc97be345" @@ -1923,6 +1938,13 @@ "@types/node" ">=6" tslib "^1.9.3" +"@wry/context@^0.5.2": + version "0.5.2" + resolved "https://registry.yarnpkg.com/@wry/context/-/context-0.5.2.tgz#f2a5d5ab9227343aa74c81e06533c1ef84598ec7" + integrity sha512-B/JLuRZ/vbEKHRUiGj6xiMojST1kHhu4WcreLfNN7q9DqQFrb97cWgf/kiYsPSUCAMVN0HzfFc8XjJdzgZzfjw== + dependencies: + tslib "^1.9.3" + "@wry/equality@^0.1.2", "@wry/equality@^0.1.9": version "0.1.11" resolved "https://registry.yarnpkg.com/@wry/equality/-/equality-0.1.11.tgz#35cb156e4a96695aa81a9ecc4d03787bc17f1790" @@ -2130,6 +2152,25 @@ apollo-client@^2.6.10: tslib "^1.10.0" zen-observable "^0.8.0" +apollo-datasource-rest@^0.9.2: + version "0.9.2" + resolved "https://registry.yarnpkg.com/apollo-datasource-rest/-/apollo-datasource-rest-0.9.2.tgz#610e8d6d26b84385265cb91415113a153aa657e9" + integrity sha512-HoKvcxp4QwnglPtJGXdG4ycncSmw6AnhrWOPNc3Q1T1wu8ffq+qN646keQXJ8ehGmVYCwZfujL1ReaD+DvDuag== + dependencies: + apollo-datasource "^0.7.1" + apollo-server-caching "^0.5.1" + apollo-server-env "^2.4.4" + apollo-server-errors "^2.4.1" + http-cache-semantics "^4.0.0" + +apollo-datasource@^0.7.1: + version "0.7.1" + resolved "https://registry.yarnpkg.com/apollo-datasource/-/apollo-datasource-0.7.1.tgz#0b06da999ace50b7f5fe509f2a03f7de97974334" + integrity sha512-h++/jQAY7GA+4TBM+7ezvctFmmGNLrAPf51KsagZj+NkT9qvxp585rdsuatynVbSl59toPK2EuVmc6ilmQHf+g== + dependencies: + apollo-server-caching "^0.5.1" + apollo-server-env "^2.4.4" + apollo-link-http-common@^0.2.14, apollo-link-http-common@^0.2.16: version "0.2.16" resolved "https://registry.yarnpkg.com/apollo-link-http-common/-/apollo-link-http-common-0.2.16.tgz#756749dafc732792c8ca0923f9a40564b7c59ecc" @@ -2148,6 +2189,11 @@ apollo-link-http@^1.5.17: apollo-link-http-common "^0.2.16" tslib "^1.9.3" +apollo-link-rest@^0.8.0-beta.0: + version "0.8.0-beta.0" + resolved "https://registry.yarnpkg.com/apollo-link-rest/-/apollo-link-rest-0.8.0-beta.0.tgz#435055d4bee82182c17974df5a9a606c4edf62a1" + integrity sha512-+/cHVXz0jF4SOg3bIVPxCArnpp7ojwhLarT9MLzbAuoaI+Uq+pU9Ob8Xmq4BS3Z+mIdVmnrIyw8EvqEzP7RL0w== + apollo-link-schema@^1.2.5: version "1.2.5" resolved "https://registry.yarnpkg.com/apollo-link-schema/-/apollo-link-schema-1.2.5.tgz#a1aad9adf7eefc9252797b0a67a4d41f215237db" @@ -2166,6 +2212,26 @@ apollo-link@1.2.14, apollo-link@^1.0.0, apollo-link@^1.2.12, apollo-link@^1.2.14 tslib "^1.9.3" zen-observable-ts "^0.8.21" +apollo-server-caching@^0.5.1: + version "0.5.1" + resolved "https://registry.yarnpkg.com/apollo-server-caching/-/apollo-server-caching-0.5.1.tgz#5cd0536ad5473abb667cc82b59bc56b96fb35db6" + integrity sha512-L7LHZ3k9Ao5OSf2WStvQhxdsNVplRQi7kCAPfqf9Z3GBEnQ2uaL0EgO0hSmtVHfXTbk5CTRziMT1Pe87bXrFIw== + dependencies: + lru-cache "^5.0.0" + +apollo-server-env@^2.4.4: + version "2.4.4" + resolved "https://registry.yarnpkg.com/apollo-server-env/-/apollo-server-env-2.4.4.tgz#12d2d0896dcb184478cba066c7a683ab18689ca1" + integrity sha512-c2oddDS3lwAl6QNCIKCLEzt/dF9M3/tjjYRVdxOVN20TidybI7rAbnT4QOzf4tORnGXtiznEAvr/Kc9ahhKADg== + dependencies: + node-fetch "^2.1.2" + util.promisify "^1.0.0" + +apollo-server-errors@^2.4.1: + version "2.4.1" + resolved "https://registry.yarnpkg.com/apollo-server-errors/-/apollo-server-errors-2.4.1.tgz#16ad49de6c9134bfb2b7dede9842e73bb239dbe2" + integrity sha512-7oEd6pUxqyWYUbQ9TA8tM0NU/3aGtXSEibo6+txUkuHe7QaxfZ2wHRp+pfT1LC1K3RXYjKj61/C2xEO19s3Kdg== + apollo-upload-client@13.0.0: version "13.0.0" resolved "https://registry.yarnpkg.com/apollo-upload-client/-/apollo-upload-client-13.0.0.tgz#146d1ddd85d711fcac8ca97a72d3ca6787f2b71b" @@ -4525,7 +4591,16 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6 resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.4.tgz#2256bde14d3632958c465ebc96dc467ca07a29fb" integrity sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw== -graphql-tag@^2.10.3: +graphql-anywhere@^4.2.7: + version "4.2.7" + resolved "https://registry.yarnpkg.com/graphql-anywhere/-/graphql-anywhere-4.2.7.tgz#c06fb40b1d62b39470c80e3731478dbbef060067" + integrity sha512-fJHvVywWVWjiHuPIMs16Nfjf4zdQUwSO1LKycwBJCWIPeoeQ8LqXK2BgYoZAHkhKEFktZZeYyzS4o/uIUG0z5A== + dependencies: + apollo-utilities "^1.3.4" + ts-invariant "^0.3.2" + tslib "^1.10.0" + +graphql-tag@^2.10.2, graphql-tag@^2.10.3: version "2.10.3" resolved "https://registry.yarnpkg.com/graphql-tag/-/graphql-tag-2.10.3.tgz#ea1baba5eb8fc6339e4c4cf049dabe522b0edf03" integrity sha512-4FOv3ZKfA4WdOKJeHdz6B3F/vxBLSgmBcGeAFPf4n1F64ltJUvOOerNj0rsJxONQGdhUMynQIvd6LzB+1J5oKA== @@ -4718,6 +4793,11 @@ htmlparser2@4.1.0: domutils "^2.0.0" entities "^2.0.0" +http-cache-semantics@^4.0.0: + version "4.1.0" + resolved "https://registry.yarnpkg.com/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz#49e91c5cbf36c9b94bcfcd71c23d5249ec74e390" + integrity sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ== + http-signature@~1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.2.0.tgz#9aecd925114772f3d95b65a60abb8f7c18fbace1" @@ -6000,7 +6080,7 @@ lower-case@^2.0.1: dependencies: tslib "^1.10.0" -lru-cache@5.1.1, lru-cache@^5.1.1: +lru-cache@5.1.1, lru-cache@^5.0.0, lru-cache@^5.1.1: version "5.1.1" resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920" integrity sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w== @@ -6430,7 +6510,7 @@ node-emoji@^1.8.1: dependencies: lodash.toarray "^4.4.0" -node-fetch@2.6.0: +node-fetch@2.6.0, node-fetch@^2.1.2: version "2.6.0" resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.0.tgz#e633456386d4aa55863f676a7ab0daa8fdecb0fd" integrity sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA== @@ -6709,6 +6789,13 @@ optimism@^0.10.0: dependencies: "@wry/context" "^0.4.0" +optimism@^0.12.1: + version "0.12.1" + resolved "https://registry.yarnpkg.com/optimism/-/optimism-0.12.1.tgz#933f9467b9aef0e601655adb9638f893e486ad02" + integrity sha512-t8I7HM1dw0SECitBYAqFOVHoBAHEQBTeKjIL9y9ImHzAVkdyPK4ifTgM4VJRDtTUY4r/u5Eqxs4XcGPHaoPkeQ== + dependencies: + "@wry/context" "^0.5.2" + optionator@^0.8.1: version "0.8.3" resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.3.tgz#84fa1d036fe9d3c7e21d99884b601167ec8fb495" @@ -7864,6 +7951,11 @@ q@^1.1.2: resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7" integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc= +qs@^6.9.4: + version "6.9.4" + resolved "https://registry.yarnpkg.com/qs/-/qs-6.9.4.tgz#9090b290d1f91728d3c22e54843ca44aea5ab687" + integrity sha512-A1kFqHekCTM7cz0udomYUoYNWjBebHm/5wzU/XqrBRBNWectVH0QIiN+NEcZ0Dte5hvzHwbr8+XQmguPhJ6WdQ== + qs@~6.5.2: version "6.5.2" resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36" @@ -9072,7 +9164,7 @@ svgo@^1.0.0: unquote "~1.1.1" util.promisify "~1.0.0" -symbol-observable@^1.0.2, symbol-observable@^1.0.4: +symbol-observable@^1.0.2, symbol-observable@^1.0.4, symbol-observable@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804" integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ== @@ -9275,6 +9367,13 @@ traverse@0.6.6: resolved "https://registry.yarnpkg.com/traverse/-/traverse-0.6.6.tgz#cbdf560fd7b9af632502fed40f918c157ea97137" integrity sha1-y99WD9e5r2MlAv7UD5GMFX6pcTc= +ts-invariant@^0.3.2: + version "0.3.3" + resolved "https://registry.yarnpkg.com/ts-invariant/-/ts-invariant-0.3.3.tgz#b5742b1885ecf9e29c31a750307480f045ec0b16" + integrity sha512-UReOKsrJFGC9tUblgSRWo+BsVNbEd77Cl6WiV/XpMlkifXwNIJbknViCucHvVZkXSC/mcWeRnIGdY7uprcwvdQ== + dependencies: + tslib "^1.9.3" + ts-invariant@^0.4.0, ts-invariant@^0.4.4: version "0.4.4" resolved "https://registry.yarnpkg.com/ts-invariant/-/ts-invariant-0.4.4.tgz#97a523518688f93aafad01b0e80eb803eb2abd86" @@ -9512,7 +9611,7 @@ util-deprecate@^1.0.1, util-deprecate@~1.0.1: resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf" integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8= -util.promisify@~1.0.0: +util.promisify@^1.0.0, util.promisify@~1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/util.promisify/-/util.promisify-1.0.1.tgz#6baf7774b80eeb0f7520d8b81d07982a59abbaee" integrity sha512-g9JpC/3He3bm38zsLupWryXHoEcS22YHthuPQSJdMy6KNrzIRzWqcsHzD/WUnqe45whVou4VIsPew37DoXWNrA== @@ -9962,7 +10061,7 @@ zen-observable-ts@^0.8.21: tslib "^1.9.3" zen-observable "^0.8.0" -zen-observable@^0.8.0: +zen-observable@^0.8.0, zen-observable@^0.8.14: version "0.8.15" resolved "https://registry.yarnpkg.com/zen-observable/-/zen-observable-0.8.15.tgz#96415c512d8e3ffd920afd3889604e30b9eaac15" integrity sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ==