Dev Server Preview with Gatsby and WordPress

Support
1

Has anyone got a good guide to integrating the new Netlify Dev Server with a Gatsby / WordPress Site for preview.?

I have it redirecting to the preview / dev url, firing a webhook that triggers a rebuild but it’s not sourcing draft content.

I cannot see a setting for this?

1 Like
2

I am also encountering the same problem with draft content.

This is the code I added in functions.php in my Wordpress theme to make draft content available when running gatsby develop, but on the Netlify Dev this does not work, as it is server rendered.

// Make Draft posts available to be fetch via graphql
add_filter(
    "graphql_connection_query_args",
    function ($query_args, $resolver) {
        if ($query_args["post_status"] === "publish") {
            $query_args["post_status"] = ["publish", "draft", "auto_draft"];
        }
        return $query_args;
    },
    10,
    2
);
add_filter(
    "graphql_data_is_private",
    function (
        $is_private,
        $model_name,
        $data,
        $visibility,
        $owner,
        $current_user
    ) {
        if (
            ($data instanceof \WP_Post && $data->post_status === "draft") ||
            ($data instanceof \WP_Post && $data->post_status === "auto_draft")
        ) {
            return false;
        }
        return $is_private;
    },
    10,
    6
);

Also, it is not updating if I, for example, change content and than click on the Preview button before publishing anything, which is the whole point with the Preview.

3

I was thinking if you could pass an header from Gatsby to WordPress you could pass along "X-Netlify-Context": process.env.CONTEXT
then you could apply your code