How to properly set and query siteMetadata in Gatsbyjs? - graphql

The issue I am running into is that when I set a key-value pair in the gatsby-config.js file I am not able to see the data inside GraphiQL. I am following the documentation and using keys that are used in the example code. See here for the documentation: https://www.gatsbyjs.org/docs/gatsby-config/#sitemetadata
Here is my gatsby-config.js file:
module.exports = {
siteMetadata: {
title: `My Photography Site`,
description: `Just the best`,
},
plugins: [
`gatsby-plugin-emotion`,
`gatsby-transformer-remark`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `src`,
path: `${__dirname}/src/`,
},
},
{
resolve: `gatsby-plugin-typography`,
options: {
pathToConfigModule: `src/utils/typography`,
},
},
],
}
Here is my GraphiQL query (after restarting the development server to reload the gatsby-config.js file):
query SiteQuery {
site {
siteMetadata {
title
description
}
}
}
Expected results from the GraphiQL:
{
"data": {
"site": {
"siteMetadata": {
"title": "My Photography Site",
"description": "Just the best"
}
}
}
}
Here is the actual result of the GraphiQL:
{
"errors": [
{
"message": "Cannot query field \"description\" on type \"SiteSiteMetadata\".",
"locations": [
{
"line": 5,
"column": 7
}
],
"stack": [
"GraphQLError: Cannot query field \"description\" on type \"SiteSiteMetadata\".",
" at Object.Field (/mnt/c/Users/Spencer/dev/gatsbyjs/hello-world/node_modules/graphql/validation/rules/FieldsOnCorrectType.js:64:31)",
" at Object.enter (/mnt/c/Users/Spencer/dev/gatsbyjs/hello-world/node_modules/graphql/language/visitor.js:334:29)",
" at Object.enter (/mnt/c/Users/Spencer/dev/gatsbyjs/hello-world/node_modules/graphql/language/visitor.js:385:25)",
" at visit (/mnt/c/Users/Spencer/dev/gatsbyjs/hello-world/node_modules/graphql/language/visitor.js:252:26)",
" at validate (/mnt/c/Users/Spencer/dev/gatsbyjs/hello-world/node_modules/graphql/validation/validate.js:63:22)",
" at /mnt/c/Users/Spencer/dev/gatsbyjs/hello-world/node_modules/express-graphql/dist/index.js:154:52",
" at processTicksAndRejections (internal/process/task_queues.js:89:5)"
]
}
]
}
What is odd is that I was able to successfully create a custom key-value pair before and it worked fine. I had a key of tagLine and a value of Panda Site. The normal title key worked as well.
Here are the software versions I am using:
gatsby: 2.5.12
node: v12.1.0
npm: 6.9.0
I am running using Windows Subsystem for Linux (WSL). Let me know if you would like any other config files, including package.json.

Related

Why does FaunaDB output differ from Graphqli?

I have created a simple user.gql file
type Query {
users: [user]
userById(id:ID!):user
}
type user {
id: ID!
chat_data: String
}
My data is
[
{
"id": "0815960b-9725-48d5-b326-7718c4749cf5",
"chat_data": ""
}
]
When I run this on my local server and use the query
{users{id}}
I see the expected output
{
"data": {
"users": [
{
"id": "0815960b-9725-48d5-b326-7718c4749cf5"
}
]
}
}
I have created a user collection on FaunaDB with the data
{
"ref": Ref(Collection("user"), "324407037973758152"),
"ts": 1645691670220000,
"data": {
"id": "0815960b-9725-48d5-b326-7718c4749cf5",
"chat_data": ""
}
}
and uploaded my user.gql, but when I run the GraphQl query
{users{id}}
I get the error
{
"data": null,
"errors": [
{
"message": "Cannot query field 'id' on type 'userPage'. (line 3, column 5):\n id\n ^",
"locations": [
{
"line": 3,
"column": 5
}
]
}
]
}
What am I doing wrong?
This is very unintuitive, but Fauna seems to be returning a paginated result. Read more about it here.
The best thing would be to GraphiQL to have a look at the schema of the Fauna GraphQL endpoint. Autocomplete should also work when you look for fields to query. The error basically says that you can't query the id directly. Try this:
{ users { data { id } } }

go-restful-openapi $refs must reference a valid location in the document

I'm using go-restful in combination with go-restful-openapi to generate my swagger doc automatically. However, on testing the tool with the swagger-editor, I get the following error:
$refs must reference a valid location in the document
struct
type Users struct {
# uuid imported from github.com/google/uuid#v1.2.0
RelatedUsers []uuid.UUID `json:"relatedIds" validate:"required"`
}
generated swagger snippet
"Users": {
"required": [
"relatedIds"
],
"properties": {
"relatedIds": {
"type": "array",
"$ref": "#/definitions/uuid.UUID" #this line returns an error
}
}
}
}
Here's the swagger config:
swaggerConfig := restfulspec.Config{
WebServices: restfulContainer.RegisteredWebServices(),
APIPath: "/swagger.json",
PostBuildSwaggerObjectHandler: func(swo *spec.Swagger) {
swo.Info = &spec.Info{
InfoProps: spec.InfoProps{
Title: "User Service",
Description: "An example service for stackoverflow",
Version: "1.0.0",
},
}
},
}
NOTE: If I replace the lines above in the swagger editor as follows the error disappears, however, I couldn't figure out how to configure swagger to do so automatically
"Users": {
"required": [
"relatedIds"
],
"properties": {
"relatedUsers": {
type: array
items:
type: "string"
format: "uuid"
}
}
}
}
Just in case someone is running into this issue: go-restful-openapi cannot resolve imported custom types. To solve this issue add the type to the definitions
swo.Definitions["uuid.UUID"] = spec.Schema{
SchemaProps: spec.SchemaProps{
Type: []string{"string"},
Format: "uuid",
},
}

Cannot query field "allDevArticles" on type "Query" graphql/template-strings for fetching dev.to articles

I am using the gatsby-source-dev gatsby plugin to get all my dev.to articles on my gatsby page.
https://github.com/geocine/gatsby-source-dev
It was working fine but recently it started giving me this error.
"cannot query field "allDevArticles" on type "Query" graphql/template-strings"
and not able to fetch my latest articles on the site.
My gatsby-config.js looks like this
module.exports = {
plugins: [
`gatsby-plugin-react-helmet`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `profile`,
path: `./data`,
},
},
`gatsby-transformer-sharp`,
`gatsby-transformer-json`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-source-dev`,
options: {
username:'vish448'
}
},
],
}
My graphql query on the page looks like this
export const query = graphql`
query ArticlePageQuery {
allDevArticles {
nodes {
article {
title
url
published_at(formatString: "DD MMM YYYY")
}
}
}
}`
I have updated my configuration in gatsby-config.js for gatsby-source-dev plugin and it works fine. So basically those string quotes are causing an issue. I have changed those quotes to string literals (``)
module.exports = {
plugins: [
`gatsby-plugin-react-helmet`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `profile`,
path: `./data`,
},
},
`gatsby-transformer-sharp`,
`gatsby-transformer-json`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-source-dev`,
options: {
**username:`vish448`**
}
},
],
}

Shopify GraphQL Checkout Create Mutation

I cannot create a checkout with Shopify's Graphql API
I am literally copying the example from this page in Shopify's Checkout Guide and pasting it into Shopify's GraphiQL App installed on the store where I am trying to create the checkout.
This is my mutation, where the only thing I changed was the variantId so it matches one on my store:
mutation {
checkoutCreate(input: {
lineItems: [{ variantId: "gid://shopify/ProductVariant/46037988422", quantity: 1 }]
}) {
checkout {
id
webUrl
lineItems(first: 5) {
edges {
node {
title
quantity
}
}
}
}
}
}
This is the response I'm getting from Shopify:
{
"errors": [
{
"message": "Field 'checkoutCreate' doesn't exist on type 'Mutation'",
"locations": [
{
"line": 2,
"column": 3
}
],
"path": [
"mutation",
"checkoutCreate"
],
"extensions": {
"code": "undefinedField",
"typeName": "Mutation",
"fieldName": "checkoutCreate"
}
}
The weird thing is that obviously checkoutCreate IS a mutation, according to Shopify. See the link to the page here
Then I noticed, that the mutation on that page is different. So I'm trying that version, without a variable like this:
mutation checkoutCreate(input: {
lineItems: [{ variantId: "gid://shopify/ProductVariant/46037988422", quantity: 1 }]
}) {
checkout {
id
}
checkoutUserErrors {
code
field
message
}
}
And now the error I'm getting back is:
{
"errors": [
{
"message": "Parse error on \"input\" (INPUT) at [1, 25]",
"locations": [
{
"line": 1,
"column": 25
}
]
}
]
}
Finally I tried this version with a variable and it also failed:
mutation checkoutCreate($input: CheckoutCreateInput!) {
checkoutCreate(input: $input) {
checkout {
id
}
checkoutUserErrors {
code
field
message
}
}
}
{
"input": {
lineItems: [{ variantId: "gid://shopify/ProductVariant/46037988422", quantity: 1 }]
}
}
The error here was:
{
"errors": [
{
"message": "Parse error on \"input\" (STRING) at [15, 3]",
"locations": [
{
"line": 15,
"column": 3
}
]
}
]
}
On top of all this, Shopify has interactive docs in their GraphiQL App.. and it does NOT list checkoutCreate as an available mutation. See this screenshot: https://nimb.ws/af4iHx
I believe your input is parsed as JSON, so try putting quotes even around the nested properties of your mutation variables when testing.
{
"input": {
"lineItems": [{ "variantId": "gid://shopify/ProductVariant/46037988422",
"quantity": 1 }]
}
}
The mutations that complete checkouts are only available for sales channels. These apps must be public. So it might not work if you are creating a private app.
https://shopify.dev/tutorials/create-a-checkout-with-storefront-api
https://shopify.dev/tutorials/authenticate-a-public-app-with-oauth#turn-an-app-into-a-sales-channel

How to explicitly set schema field type to [SanityImage]

I want to set an images field in my document to an array of type [SanityImage].
I have tried setting it to type: 'image' but when I query the field I get that the type is [SanityCollectionItemsImages]
The images field is found inside an object (productVariant) which is then included in the main document (collection) where I have an array of productVariants in my items field.
Inside the fields array of my collection document:
...
{
title: "Items",
name: "items",
type: "array",
of: [
{
title: "Item",
type: "productVariant",
},
],
},
...
The productVariant type object:
export default {
title: "Product variant",
name: "productVariant",
type: "object",
fields: [
{
name: "images",
title: "Images",
type: "array",
of: [
{
type: "image",
options: {
hotspot: true,
},
},
],
},
...
My query using GraphQL:
allSanityCollection {
edges {
node {
_id
title
description
items {
_key
title
images {
asset {
_ref
_id
fluid(maxHeight: 600) {
base64
aspectRatio
src
srcSet
srcWebp
srcSetWebp
sizes
}
}
}
}
}
}
}
When I click on the the images field inside the GraphiQL web IDE:
Using Sanity.io HTTP API to get the whole document:
"images": [
{
"_key": "5605f5383975",
"_type": "image",
"asset": {
"_ref": "image-14f9b7688912499f187b7c20e57816b3cdf42c1e-4016x4688-jpg",
"_type": "reference"
}
},
...
My question is how to set the type of a field in my schema to be explicitly [SanityImage] instead of [SanityCollectionItemsImages] and why do I get that weird type?
The Sanity schema looks totally sane, and the API delivers the proper data structure as you say, so the problem seems to be related to the Gatsby and GraphQL layer of things.
I'll recommend making sure you are using the latest versions of the CLI, Studio and Sanity Gatsby plugin and see if that makes things better as development on the Gatsby source plugin is moving fast.

Resources