Graphql Support

[mansoor292]

Hi, thanks for putting this library together, it was fun reading it.

This may not be an issue, could just be a noob question.

I am using the graphql and grapqhl-gutenburg plugins to pull down the content and it does not play well with your setup. I think I may be confused but does your code only work with a certain set of blocks? I am just using default blocks but I am not sure if there is such a thing as default, or are they all theme dependent.

For now I am using the content field and css files from the wordpress site, with dangerouslysetinnerhtml and it is working OK.

[mansoor292]

Here is my basic provider in case anyone is trying to do something similar.

`import React, { useContext, useState, createContext, } from "react"; import { data } from "./static.json"; import { ApolloClient, gql, InMemoryCache, useQuery } from "@apollo/client";

const query = gql{ pages { nodes { slug title content blocksJSON } } };

const wpClient = new ApolloClient({ uri: "/graphql", cache: new InMemoryCache(), });

const StaticContext = createContext({ staticRoutes: data.pages.nodes });

const StaticProvider: React.FunctionComponent = ({ children }) => { const [staticRoutes, setStaticRoutes] = useState(data.pages.nodes); const { loading } = useQuery(query, { client: wpClient, onCompleted: (res) => { setStaticRoutes(res.pages.nodes); }, });

return ( <StaticContext.Provider value={{ staticRoutes, }} > {!loading && children} </StaticContext.Provider> ); };

const useStaticContext = () => useContext(StaticContext);

export { StaticProvider, useStaticContext }; `

[u12206050]

Hei,

It is totally fine to do it your way, however I will point out this library comes in handy when you have your own custom blocks in Gutenberg built with the custom block plugin in WP.

It makes it easier creating the frontend components for each block so you can easily add interaction etc.

But yes for most of the default WP blocks, just using dangerouslysethtml will be good enough and is actually what allot of the default blocks do.

Would be more interesting to know why it doesn't work with your setup.

On Tue, 15 Sep 2020, 05:46 mansoor292, [email protected] wrote:

Here is my basic provider in case anyone is trying to do something similar.

`import React, { useContext, useState, createContext, } from "react"; import { data } from "./static.json"; import { ApolloClient, gql, InMemoryCache, useQuery } from "@apollo/client";

const query = gql{ pages { nodes { slug title heading: title content } } } ;

const wpClient = new ApolloClient({ uri: "/graphql", cache: new InMemoryCache(), });

const StaticContext = createContext({ staticRoutes: data.pages.nodes });

const StaticProvider: React.FunctionComponent = ({ children }) => { const [staticRoutes, setStaticRoutes] = useState(data.pages.nodes); const { loading } = useQuery(query, { client: wpClient, onCompleted: (res) => { setStaticRoutes(res.pages.nodes); }, });

return ( <StaticContext.Provider value={{ staticRoutes, }}

{!loading && children} </StaticContext.Provider> ); };

const useStaticContext = () => useContext(StaticContext);

export { StaticProvider, useStaticContext }; `

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/u12206050/react-gutenberg/issues/5#issuecomment-692445232, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABSVMWVXKK2A6FAR4DJ6LH3SF3PS7ANCNFSM4RMOQ2GA .

[mansoor292]

So the graphql plugin sends back a graph object called blocks and a stringified version called blocksJSON.

If I parse the blocksJson below is what I get for a minimal layout. I believe this doesnt play nicely with your type IWPGBlock: blockName: string | null attrs: any[] | { [k:string]: any } innerBlocks: IWPGBlock[] innerHTML: string

{ "innerBlocks": [], "name": "core/paragraph", "postId": 65866, "blockType": { "name": "core/paragraph", "attributes": { "align": { "type": "string" }, "content": { "type": "string", "source": "html", "selector": "p", "default": "" }, "dropCap": { "type": "boolean", "default": false }, "placeholder": { "type": "string" }, "textColor": { "type": "string" }, "customTextColor": { "type": "string" }, "backgroundColor": { "type": "string" }, "customBackgroundColor": { "type": "string" }, "fontSize": { "type": "string" }, "customFontSize": { "type": "number" }, "direction": { "type": "string", "enum": ["ltr", "rtl"] }, "className": { "type": "string" }, "ampFitText": { "default": false }, "minFont": { "default": 6, "source": "attribute", "selector": "amp-fit-text", "attribute": "min-font-size" }, "maxFont": { "default": 72, "source": "attribute", "selector": "amp-fit-text", "attribute": "max-font-size" }, "height": { "default": 80, "source": "attribute", "selector": "amp-fit-text", "attribute": "height" } }, "keywords": ["text"], "category": "common", "title": "Paragraph", "description": "Start with the building block of all narrative.", "example": { "attributes": { "content": "In a village of La Mancha, the name of which I have no desire to call to mind, there lived not long since one of those gentlemen that keep a lance in the lance-rack, an old buckler, a lean hack, and a greyhound for coursing.", "customFontSize": 28, "dropCap": true } }, "supports": { "className": false, "__unstablePasteTextInline": true }, "deprecated": [ { "attributes": { "align": { "type": "string" }, "content": { "type": "string", "source": "html", "selector": "p", "default": "" }, "dropCap": { "type": "boolean", "default": false }, "placeholder": { "type": "string" }, "textColor": { "type": "string" }, "customTextColor": { "type": "string" }, "backgroundColor": { "type": "string" }, "customBackgroundColor": { "type": "string" }, "fontSize": { "type": "string" }, "customFontSize": { "type": "number" }, "direction": { "type": "string", "enum": ["ltr", "rtl"] }, "className": { "type": "string" }, "ampFitText": { "default": false }, "minFont": { "default": 6, "source": "attribute", "selector": "amp-fit-text", "attribute": "min-font-size" }, "maxFont": { "default": 72, "source": "attribute", "selector": "amp-fit-text", "attribute": "max-font-size" }, "height": { "default": 80, "source": "attribute", "selector": "amp-fit-text", "attribute": "height" } }, "supports": { "className": false } }, { "attributes": { "align": { "type": "string" }, "content": { "type": "string", "source": "html", "selector": "p", "default": "" }, "dropCap": { "type": "boolean", "default": false }, "placeholder": { "type": "string" }, "textColor": { "type": "string" }, "customTextColor": { "type": "string" }, "backgroundColor": { "type": "string" }, "customBackgroundColor": { "type": "string" }, "fontSize": { "type": "string" }, "customFontSize": { "type": "number" }, "direction": { "type": "string", "enum": ["ltr", "rtl"] }, "width": { "type": "string" }, "className": { "type": "string" }, "ampFitText": { "default": false }, "minFont": { "default": 6, "source": "attribute", "selector": "amp-fit-text", "attribute": "min-font-size" }, "maxFont": { "default": 72, "source": "attribute", "selector": "amp-fit-text", "attribute": "max-font-size" }, "height": { "default": 80, "source": "attribute", "selector": "amp-fit-text", "attribute": "height" } }, "supports": { "className": false } }, { "attributes": { "align": { "type": "string" }, "content": { "type": "string", "source": "html", "selector": "p", "default": "" }, "dropCap": { "type": "boolean", "default": false }, "placeholder": { "type": "string" }, "textColor": { "type": "string" }, "backgroundColor": { "type": "string" }, "fontSize": { "type": "number" }, "direction": { "type": "string", "enum": ["ltr", "rtl"] }, "className": { "type": "string" }, "ampFitText": { "default": false }, "minFont": { "default": 6, "source": "attribute", "selector": "amp-fit-text", "attribute": "min-font-size" }, "maxFont": { "default": 72, "source": "attribute", "selector": "amp-fit-text", "attribute": "max-font-size" }, "height": { "default": 80, "source": "attribute", "selector": "amp-fit-text", "attribute": "height" } }, "supports": { "className": false } }, { "attributes": { "align": { "type": "string" }, "content": { "type": "string", "source": "html", "default": "" }, "dropCap": { "type": "boolean", "default": false }, "placeholder": { "type": "string" }, "textColor": { "type": "string" }, "customTextColor": { "type": "string" }, "backgroundColor": { "type": "string" }, "customBackgroundColor": { "type": "string" }, "fontSize": { "type": "string" }, "customFontSize": { "type": "number" }, "direction": { "type": "string", "enum": ["ltr", "rtl"] }, "className": { "type": "string" }, "ampFitText": { "default": false }, "minFont": { "default": 6, "source": "attribute", "selector": "amp-fit-text", "attribute": "min-font-size" }, "maxFont": { "default": 72, "source": "attribute", "selector": "amp-fit-text", "attribute": "max-font-size" }, "height": { "default": 80, "source": "attribute", "selector": "amp-fit-text", "attribute": "height" } }, "supports": { "className": false } } ], "variations": [] }, "originalContent": "<p>These are just some test terms</p>", "saveContent": "<p>These are just some test terms</p>", "order": 0, "get_parent": {}, "attributes": { "content": "These are just some test terms", "dropCap": false, "ampFitText": false, "minFont": 6, "maxFont": 72, "height": 80 }, "attributesType": { "align": { "type": "string" }, "content": { "type": "string", "source": "html", "selector": "p", "default": "" }, "dropCap": { "type": "boolean", "default": false }, "placeholder": { "type": "string" }, "textColor": { "type": "string" }, "customTextColor": { "type": "string" }, "backgroundColor": { "type": "string" }, "customBackgroundColor": { "type": "string" }, "fontSize": { "type": "string" }, "customFontSize": { "type": "number" }, "direction": { "type": "string", "enum": ["ltr", "rtl"] }, "className": { "type": "string" }, "ampFitText": { "default": false }, "minFont": { "default": 6, "source": "attribute", "selector": "amp-fit-text", "attribute": "min-font-size" }, "maxFont": { "default": 72, "source": "attribute", "selector": "amp-fit-text", "attribute": "max-font-size" }, "height": { "default": 80, "source": "attribute", "selector": "amp-fit-text", "attribute": "height" } } },

[u12206050]

Yeh, the problem with that result is it is very raw. You'll have to parse it quite a lot to get out the information that is actually important. I'd rather stick to the already rendered html that WP can give you instead of the raw json that is required when using the WP editor.

[philohelp]

If you could get the raw version of the post_content with the graphql plugin (you can get it in graphiql in the admin), you could parse it with '@wordpress/block-serialization-default-parser' and then send the result to the WPGBlocks component. It's not really a brilliant solution, but it works.