Merge pull request #10 from smooth-code/queries

Queries

Author: gregberge

examples/wordpress/docker-compose.yml

@@ -22,7 +22,7 @@ services:
     ports:
       - '8000:80'
     environment:
-      WP_HOME: http://localhost:3001
+      WP_HOME: http://localhost:3000
       WP_DEFAULT_THEME: smooth-js
       WORDPRESS_DB_HOST: mysql:3306
       WORDPRESS_DB_USER: wordpress

examples/wordpress/package.json

@@ -1,14 +1,17 @@
 {
   "private": true,
   "scripts": {
-    "dev": "WP_HOME=http://localhost:3001 smooth dev"
+    "dev": "WP_HOME=http://localhost:3000 smooth dev"
   },
   "dependencies": {
     "graphql-tag": "^2.10.1",
     "react": "^16.8.2",
     "react-dom": "^16.8.2",
+    "smooth": "latest",
     "smooth-backend-wordpress": "latest",
-    "smooth-plugin-head-meta": "latest",
-    "smooth": "latest"
+    "smooth-plugin-head-meta": "latest"
+  },
+  "resolutions": {
+    "apollo-link-dedup": "1.0.15"
   }
 }

examples/wordpress/src/_app.js

@@ -0,0 +1,26 @@
+import React from 'react'
+import gql from 'graphql-tag'
+import { Query } from 'smooth/query'
+
+const PAGE = gql`
+  query Page {
+    page(slug: "test") {
+      title
+    }
+  }
+`
+
+export default function Page({ Component, ...props }) {
+  return (
+    <Query query={PAGE}>
+      {({ data }) =>
+        data && (
+          <>
+            <h1>{data.page.title}</h1>
+            <Component {...props} />
+          </>
+        )
+      }
+    </Query>
+  )
+}

examples/wordpress/src/pages/foo$.js

@@ -1 +1,24 @@
-export default () => 'hello'
+import React from 'react'
+import gql from 'graphql-tag'
+import { Query } from 'smooth/query'
+import { useLang } from 'smooth/page'
+
+const PAGE = gql`
+  query Page($foo: String) {
+    page(slug: "test") {
+      title
+    }
+  }
+`
+
+export default function Page() {
+  const lang = useLang()
+  return (
+    <>
+      <div>Lang: {lang}</div>
+      <Query query={PAGE}>
+        {({ data }) => (data ? data.page.title : null)}
+      </Query>
+    </>
+  )
+}

examples/wordpress/src/pages/index.js

@@ -28,6 +28,10 @@ export const contentFragment = gql`
     blocks {
       ...BlockFragment
     }
+    metadata {
+      id
+      slug
+    }
   }
 
   ${BlockFragment}

examples/wordpress/src/pages/test$.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import gql from 'graphql-tag'
+
+export const contentFragment = gql`
+  fragment PageProps on Page {
+    title
+  }
+`
+
+export default function Page({ title }) {
+  return (
+    <div>
+      <h2>Title</h2>
+      <div>{title}</div>
+    </div>
+  )
+}

package.json

@@ -15,30 +15,30 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.2.3",
-    "@babel/core": "^7.3.4",
-    "@babel/plugin-proposal-class-properties": "^7.3.4",
-    "@babel/preset-env": "^7.3.4",
+    "@babel/core": "^7.4.0",
+    "@babel/plugin-proposal-class-properties": "^7.4.0",
+    "@babel/preset-env": "^7.4.1",
     "@babel/preset-react": "^7.0.0",
-    "@loadable/babel-plugin": "^5.6.0",
+    "@loadable/babel-plugin": "^5.7.2",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
-    "babel-jest": "^24.1.0",
+    "babel-jest": "^24.5.0",
     "conventional-github-releaser": "^3.1.2",
     "cross-env": "^5.2.0",
     "doctoc": "^1.4.0",
-    "eslint": "^5.15.0",
+    "eslint": "^5.15.3",
     "eslint-config-airbnb": "^17.1.0",
     "eslint-config-prettier": "^4.1.0",
     "eslint-config-smooth": "^2.0.0",
     "eslint-plugin-import": "^2.16.0",
     "eslint-plugin-jsx-a11y": "^6.2.1",
     "eslint-plugin-react": "^7.12.4",
-    "eslint-plugin-react-hooks": "^1.4.0",
-    "jest": "^24.1.0",
+    "eslint-plugin-react-hooks": "^1.5.1",
+    "jest": "^24.5.0",
     "lerna": "^3.13.1",
     "prettier": "^1.16.4",
-    "react": "^16.8.3",
-    "react-dom": "^16.8.3",
+    "react": "^16.8.4",
+    "react-dom": "^16.8.4",
     "shx": "^0.3.2"
   }
 }

packages/smooth-backend-wordpress/src/acf/resolvers/createDefaultResolvers.js

@@ -91,7 +91,7 @@ function getQueryFieldResolver(node, helpers, state) {
   }
   const type = t.getContentSlug(typeDef)
   return {
-    async [name](object, { slug, lang, id, preview }) {
+    async [name](object, { slug }, { lang, id, preview }) {
       if (preview) {
         return state.apiClient.getContentPreview({
           type,
@@ -100,7 +100,9 @@ function getQueryFieldResolver(node, helpers, state) {
         })
       }
 
-      return state.apiClient.getContent({ type, lang, slug })
+      const res = await state.apiClient.getContent({ type, lang, slug })
+
+      return res
     },
   }
 }

packages/smooth-dev-cli/package.json

@@ -32,12 +32,12 @@
     "react-dom": ">=16.3.0"
   },
   "dependencies": {
-    "@babel/runtime": "^7.3.4",
+    "@babel/runtime": "^7.4.0",
     "chokidar": "^2.1.2",
     "configstore": "^4.0.0",
     "fs-extra": "^7.0.1",
     "is-absolute": "^1.0.0",
     "lodash": "^4.17.10",
-    "yargs": "^13.2.1"
+    "yargs": "^13.2.2"
   }
 }