score:0
if you are using gatsby, which i assume is where usestaticquery
comes from, then you can't. the static
there in the name means you can't use a variable in them. sadly :(
you can probably read more about it here: https://spectrum.chat/gatsby-js/general/using-variables-in-a-staticquery~abee4d1d-6bc4-4202-afb2-38326d91bd05
alternativelly, you could create a custom "usequery", which is a fancy way to name a function that returns a value. ;)
for this you have:
const usecustomquery = () => {
const data = usestaticquery(
graphql`
query {
allgooglesheetdatarow(filter: { state: { eq: "alabama" } }) {
edges {
node {
snap
tanf
medicaid
unemployment
}
}
}
}
`
);
return data
}
and in your "page" or any component you need data, you just need to use
const component = () => {
const data = usecustomquery()
// use data anyway you want
}
score:0
the problem is that you're using usestaticquery
rather than a page query. according to the docs:
"variables can be added to page queries (but not static queries) through the context object that is an argument of the createpage api."
so, you don't need to import usestaticquery
. simply import graphql. then, add this after your component:
export const query = graphql`
query dataquery($state: string) {
allgooglesheetdatarow(filter: { state: { eq: $state } }) {
edges {
node {
snap
tanf
medicaid
unemployment
}
}
}
}
`
then pass data
to your components parameters
export default function yourcomponent({data}) {
// access data object here.
}
i didn't include passing the variable within context in the gatsby-node.js
file. however, you'll have to do that as well. there's an example of how to do this in the link i provided.
Source: stackoverflow.com
Related Query
- How to pass graphQL query variable into a decorated react component
- How to pass variable to GraphQL filter query?
- How to pass a variable holding a string to a GraphQL query via the AWS AppSync client?
- How can I pass a URL querystring variable dynamically to a composed graphql query in react?
- How do I pass a value into an GraphQL query using gatsby and react?
- How to pass variable to graphql from method when onClick with button and get it's return data back?
- How to pass javascript variable to graphql query?
- How to filter by ID in this graphql query
- How to pass br to the content attribute or within p tag via graphql query
- How do I get a variable from a graphQl query into a pseudo element in either inline styles or styled components
- How to pass Unique Id in Graphql query
- how to pass query param in graphql
- How to use filter from an array while fetching graphql query and also must keep the array order?
- How do I pass a variable on the graphql filter?
- How to pass variables in Graphql Apollo Query
- React, Graphql - how to pass variable to mutation
- How to remove variable from graphQL query if it's empty?
- How to pass the search query to table filter between different JS files?
- How to get graphql query with filter
- Apollo GraphQL React - how to query on click?
- How to pass a state className variable to another component in react
- How can I pass a variable from 'outside' to a react app?
- How to update the Redux store after Apollo GraphQL query returns
- How to use a webpack dynamic import with a variable query string?
- GraphQL use field value as variable for another query
- Gatsby and Graphql - How to filter allMarkdownRemark by folder
- How to pass variables to a GraphQL query?
- How to pass in an instance variable from a React component to its HOC?
- Pass variable from input to GraphQL search call
- In React, how to pass a dynamic variable to a const CSS Style list?
More Query from same tag
- test antd <Select/> using jest
- Distinguishing React propTypes
- How to declare PropsType in this case?
- how to only get child route back on next js?
- Data not refreshing after adding entry to database React Router
- I am receiving an error when I run NPM start
- React duplicate api response
- React state update error whenever i open someone's image, and image not redering too. How can I fix this error
- vs code auto format on save disable for react
- Why does React randomly (so it seems) reload cached images?
- How to get converted csv into json with fields and data format in reactjs
- Automatic counter with react
- Modify states from a non react.component class
- React-Redux Shopping Cart - Decrease/Increase Item Quantity
- Firebase Storage - Wait till all upload tasks are completed before executing function
- React facebook share not working on open graph meta tags with server side rendering
- React onClick function with Parameter Returning Undefined
- Store a JSON object passed as a prop and how to access its values
- Not showing data from localStorage
- How does React implement its two-way data binding?
- Installing react-redux in a Rails project
- ComponentWillUnmount to unsubscribe from Firestore
- Gatsby with CDN reference
- Redirecting from server side in NextJS
- React.js - Is there a way to grab props.match.params value before the render() method?
- Uncaught (in promise) Error: Request failed with status code 400, How can I solve this error in React.js + Django App?
- How to make React HOC - High Order Components work together?
- Calling fetch() on multiple URLs using Promise.all
- Render Same Component With Multiple Paths React Router Dom
- map() method on multi dimensional array in gatsby/react, getting error while trying to wrap inner loop in div