Graphql Support #5
Comments
|
Here is my basic provider in case anyone is trying to do something similar. `import React, { const query = gql const wpClient = new ApolloClient({ const StaticContext = createContext({ staticRoutes: data.pages.nodes }); const StaticProvider: React.FunctionComponent = ({ children }) => { return ( const useStaticContext = () => useContext(StaticContext); export { StaticProvider, useStaticContext }; |
|
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, ***@***.***> 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
***@***.***/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
<#5 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ABSVMWVXKK2A6FAR4DJ6LH3SF3PS7ANCNFSM4RMOQ2GA>
.
|
|
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:
|
|
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. |
|
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. |
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.
The text was updated successfully, but these errors were encountered: