Gatsby에서 Wordpress의 Gravity Forms로 데이터를 보내는 방법

나는 약 2 주 동안이 문제로 고생하고 있습니다. Frontend의 ​​Gatsby와 백엔드의 WordPress를 사용하여 Jamstack 애플리케이션을 구축 중이며 Graphql과 호환되기 때문에 내 양식 구성 요소에 Gravity Forms를 사용하고 싶었습니다.

실제로 이를 수행하는 올바른 방법은 Netlify 기능을 사용하는 것입니다. 함수에 게시 요청을 보내면 함수가 WordPress에 요청을 보냅니다. 이것은 실제로 내가 이것을 선호하는 방법이지만 제 기능이 제대로 작동하도록 할 수 없었습니다. 나는 많은 시도 끝에 이 작은 해킹을 발견했고 그것을 공유하고 싶은 생각이 들었습니다. 나는 여전히 내 기능을 작동시키기 위해 노력하고 있으며 완료되면 다른 기사를 올릴 것입니다.

Gravity 양식이 WordPress와 함께 작동하도록 하기 위해 가장 먼저 할 일은 . 전체 폴더를 다운로드하여 프런트엔드용 구성 요소 폴더에 바로 넣은 다음 구성 요소에 대한 올바른 graphql 쿼리를 가져오는 readme 파일의 지침을 따르기만 하면 됩니다. 폴더에 있는 양식 구성 요소와 함께. 쉽게 스타일을 지정하거나 디자인 시스템(Material UI, Chakra UI, Rebass 등) 구성 요소를 사용하여 구성 요소를 재정의하여 양식에 정말 멋진 모습을 제공할 수 있습니다. NPM 패키지로 설치하고 WordPress에서 못생긴 베어본 스타일을 제공하는 경우에는 이 작업을 수행할 수 없습니다.

환경 변수를 설정합니다. 이 문서에서는 .env 파일을 만들고 파일에 GATSBY_LAMBDA_ENDPOINT를 만들 것을 권장합니다. 문제는 gatsby가 클라이언트 측에서 엔드포인트를 절대 읽지 않는다는 것입니다. Gatsby가 엔드포인트를 읽도록 하려면 개발의 경우 .env.development 및 프로덕션의 경우 .env.production 구조로 환경 변수를 생성합니다. 그런 다음 해당 파일에서 변수와 끝점을 정의할 수 있습니다.

다음으로 할 일은 wordpress에서 경로를 만드는 것입니다. 활성화된 테마의 functions.php 파일에서 이 작업을 수행합니다.

아래 코드를 functions.php에 붙여넣기만 하면 됩니다.

add_action( 'rest_api_init', 'form_submit_endpoint');

function form_submit_endpoint() {
    register_rest_route('formsubmit/v1', 'submit', array(
        'methods' => 'POST',
        'callback' => 'form_submit_func',
    ) );
}

function form_submit_func( WP_REST_Request $request ) {
    //echo('hello world');
    $data = (array) $request->get_params();
    $form = $data['formid'];
    $payload = $data['payload'];
    return GFAPI::submit_form($form, $payload);
}

그런 다음 wordpresssite/formsubmit/v1/submit을 가리키도록 GATSBY_LAMBDA_ENPOINT를 정의한 다음 해당 환경 변수를 양식 구성 요소의 람다에 전달하면 작동합니다. 그런 다음 Gatsby에서 Wordpress로 직접 양식 데이터를 보낼 수 있습니다.

질문이 있는 경우 언제든지 연락할 수 있으며 기꺼이 도와드리겠습니다.