
Security News
vlt Launches "reproduce": A New Tool Challenging the Limits of Package Provenance
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
gatsby-gravityforms-component
Advanced tools
A component to take gatsby-source-gravityforms query data and return usable components
A (relatively) plug and play component for parsing gatsby-source-gravityforms GraphQL data. Outputs a component using BEM classes, meaning all you need to do is style it.
Uses React Hook Forms under the hood for all that good state management.
# Install the component
yarn add gatsby-gravityforms-component
# Or with NPM
npm i gatsby-gravityforms-component
GraphQL Fragments are available from this component for making fetching the needed data. The GravityFormComponent
fragment amy be used on any GF__Form
type node. Example:
query {
allGfForm {
edges {
node {
...GravityFormComponent
}
}
}
}
GraphQL fragments are automatically available to Gatsby components. If you're looking to use these in gatsby-node.js
you will need to import them from gatsby-gravityforms-component/fragments
using the below snippet.
import 'node_modules/gatsby-gravityforms-component/fragments.js'
import React from 'react'
import GravityFormForm from 'gatsby-gravityforms-component'
// Would recommend moving this into a separate /src/hooks/gravityforms.js file
// and import where needed
import { useStaticQuery, graphql } from 'gatsby'
const allGravityData = () => {
const { allGfForm } = useStaticQuery(
graphql`
query {
allGfForm {
edges {
node {
...GravityFormComponent
}
}
}
}
`
)
return allGfForm
}
function handleError({values, error, reset}) => {
//handle error
}
function handleSuccess({values, reset, confirmations}) => {
//handle success
}
const examplePage = () => (
<GravityFormForm
id={1}
formData={allGravityData()}
presetValues={{ input_1: 'special_value' }}
lambda={process.env.LAMBDA_ENDPOINT}
successCallback={handleSuccess}
errorCallback={handleError}
/>
)
export default examplePage
This outputs the form that has been set up in WordPress - Gravity Forms. Ready for you to style it!
The following environment variables should be added to your hosting provider backend. If unsure, most providers have an article explaining. A quick Google should find this.
GF_CONSUMER_KEY = 'XXXXXX'
GF_CONSUMER_SECRET = 'XXXXXX'
LAMBDA_ENDPOINT = 'https://examplesite.com/.netlify/functions/newGfEntry'
See "/examples/lambda/.env/sample" for the file.
Depending on what build (Gatsby/React/ect) you are using, these will need to be defined and pulled into your project in different ways.
There is a need for a Lambda (or other) server function as the Gravity Forms API keys cannot be stored in a static site. The data needs to be passed to a middleman where the keys are added, before being sent to WordPress.
The data flow is as follows:
Point 3 can be managed in multiple ways, depending on your build.
On your Gatsby project set up an Environment Variable named GATSBY_RECAPTCHA_SITE_KEY
with your reCAPTCHA site key as value. This variable will be automatically used whenever Gravity Form that has a reCAPTCHA field.
Upon responding to the captcha Google sends back a reCAPTCHA response token that gets stored in a hidden <input>
on your form. When your form data is sent back to your Wordpress website(through a Lambda function), Gravity Forms will automatically verify the reCAPTCHA token token to ensure it was sent by a human.
If you are using Netlify then it is recommended you use a Lambda function. This process is relatively plug and play.
To enable the component to pass data from a static site to a server needs a little big of help to bridge the gap. As Gravity Forms uses secret keys to read/write, there needs to be somewhere safe to hold and manage these details.
Using a combination of environment variables and a Lambda function we can navigate these insecure waters.
Add the following function as a Lambda function, and add your Gravity Form keys as environment variables (these will be already set if you are using the gatsby-source-gravityforms plugin).
The steps below are a boilerplate to build this bridge. However you will need to add a new step in your development process. This blog post explains how to start locally developing lambda functions. You can test the function locally by adding the below environment variables. See section below about testing on localhost and circumventing security warnings
LAMBDA_ENDPOINT="http://localhost:9000/.netlify/functions/newGfEntry"
LAMBDA_ENDPOINT="https://website-name/.netlify/functions/newGfEntry"
[build]
Functions = "lambda"
Command = "npm run build:lambda && gatsby build"
[build.environment]
GF_CONSUMER_KEY="XXX"
GF_CONSUMER_SECRET="XXX"
The netlify.toml
file will override your build command on deployment. So we need to tell Netlify to build your lamdba function and also your Gatsby site.
The lambda function does not have access to your .env.*
files you need to define the same keys here again (it is unfortunate to double handle this and a solution would be appreciated).
When done, you will have created these files and folders: ./netlify.toml ./lambda/ ./src/lambda/ ./src/lambda/newGfEntry.js
To test all this make sure to run npm run start:lambda
in one tab, which will spin up the endpoint at http://localhost:9000
, and then run gatsby develop
in another.
If you have any issues with these steps, see these articles:
TODO
If you are running this in a development build on localhost in Chrome, you will come across a Cors issue. No matter what you do, the request will not be read. This is due to Chrome not allowing this.
A solution for a development environment - Run Chrome with the following flag: --disable-web-security
For more information: https://stackoverflow.com/questions/10883211/deadly-cors-when-http-localhost-is-the-origin/10892392#10892392
If you are having Self Signed Certificate issues, put this at the top of the newGfEntry.js file.
process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0"
Firstly, yes please! Any help would be great.
If you are developing locally, you may run into an error "Cannot resolve React". If you do, check out this article: https://thoughtsandstuff.com/building-react-components-for-gatsby-using-npm-link-and-hooks-cant-resolve-react-solution
Split into a component that can work with GF, or be created by a custom object and pass to any backend api.
v2.0.0
data.data.payload
but data.payload
as was intended.FAQs
A component to take gatsby-source-gravityforms query data and return a usable form.
The npm package gatsby-gravityforms-component receives a total of 52 weekly downloads. As such, gatsby-gravityforms-component popularity was classified as not popular.
We found that gatsby-gravityforms-component demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
Research
Security News
Socket researchers uncovered a malicious PyPI package exploiting Deezer’s API to enable coordinated music piracy through API abuse and C2 server control.
Research
The Socket Research Team discovered a malicious npm package, '@ton-wallet/create', stealing cryptocurrency wallet keys from developers and users in the TON ecosystem.