I'd like to use a GraphQL code snippet in an '.mdx' file:
---
title: Releasing A GitHub Action
date: "2021-03-22T12:35:16"
slug: /blog/releasing-a-github-action
description: "After using other people's GitHub Actions, I thought I'd give one a shot."
---
this is text in the .mdx file
/```graphql
mutation UpdateAllEnvironmentVariablesForSite(
$id: UUID!
$buildEnvironmentVariables: [TagInput!]!
$previewEnvironmentVariables: [TagInput!]!
) {
updateBuildEnvironmentVariablesForSite: updateEnvironmentVariablesForSite(
id: $id
environmentVariables: $buildEnvironmentVariables
runnerType: BUILDS
) {
success
message
}
updatePreviewEnvironmentVariablesForSite: updateEnvironmentVariablesForSite(
id: $id
environmentVariables: $previewEnvironmentVariables
runnerType: PREVIEW
) {
success
message
}
}
/```
Continuing to write .mdx
When I develop this, it looks fine. When I build it in Gatsby Cloud, I get the error
Encountered unknown language 'graphql'. If 'graphql' is an alias for a supported language, use the 'languageAliases' plugin option to map it to the canonical language name.
How do I get around this?
As you can see from the MDX+Gatsby docs:
Note: For now, this only works if the .mdx file exporting the query is
placed in src/pages. Exporting GraphQL queries from .mdx files that
are used for programmatic page creation in gatsby-node.js via
actions.createPage is not currently supported.
A sample working query in a .mdx file looks like:
import { graphql } from "gatsby"
# My Awesome Page
Here's a paragraph, followed by a paragraph with data!
<p>{props.data.site.siteMetadata.description}</p>
export const pageQuery = graphql`
query {
site {
siteMetadata {
description
title
}
}
}
`
In your case, I guess that your snippet won't work even outside the .mdx file in a gatsby build because you are not exporting the query or using a page-query approach. Try adapting your GraphQL query to the "common" way to see how it behaves.
Related
I'm using Laravel lighthouse to be my graphql server inside my Laravel app. Now I've added custom queries and types to my graphql/schema.graphql file, I want to be able to get typings in my TypeScript Vue 3 app which is located in the Laravel project. However, when I run the graphql-codegen --config codegen.yml command, it fails because the query being generated doesn't match what's in the schema file.
The query in my graphql/schema.graphql file.
type Query {
posts: [Post!]! #paginate(defaultCount: 10)
}
My Query I call in my Vue component
{
posts {
data {
uuid
body
user {
name
}
}
}
}
The code below is my codegen.yml file
overwrite: true
schema: "./graphql/schema.graphql"
documents: "./resources/js/pages/**/*.vue"
generates:
./resources/js/generated.ts:
plugins:
- "typescript"
- "typescript-operations"
- "typescript-vue-apollo-smart-ops"
Any ideas where I need to point it to or how I get graphql-codegen to generated the correct typings?
Your source schema is transformed by directives such as #paginate. Use the following artisan command to generate a single file that contains your entire and final schema:
php artisan lighthouse:print-schema
See https://lighthouse-php.com/master/api-reference/commands.html#print-schema
I am trying to follow the documentation on the Nexus-Schema (nexusjs) website for adding scalar types to my GraphQL application.
I have tried adding many of the different implementations to my src/types/Types.ts file using the samples provided in the documentation and the interactive examples. My attempts include:
Without a 3rd party libraries:
const DateScalar = scalarType({
name: 'Date',
asNexusMethod: 'date',
description: 'Date custom scalar type',
parseValue(value) {
return new Date(value)
},
serialize(value) {
return value.getTime()
},
parseLiteral(ast) {
if (ast.kind === Kind.INT) {
return new Date(ast.value)
}
return null
},
})
With graphql-iso-date 3rd party library:
import { GraphQLDate } from 'graphql-iso-date'
export const DateTime = GraphQLDate
With graphql-scalars 3rd party library (as shown in the ghost example):
export const GQLDate = decorateType(GraphQLDate, {
rootTyping: 'Date',
asNexusMethod: 'date',
})
I am using this new scalar type in an object definition like the following:
const SomeObject = objectType({
name: 'SomeObject',
definition(t) {
t.date('createdAt') // t.date() is supposed to be available because of `asNexusMethod`
},
})
In all cases, these types are exported from the types file and imported into the makeSchema's types property.
import * as types from './types/Types'
console.log("Found types", types)
export const apollo = new ApolloServer({
schema: makeSchema({
types,
...
context:()=>(
...
})
})
The console.log statement above does show that consts declared in the types file are in scope:
Found types {
GQLDate: Date,
...
}
If I run the app in development mode, everything boots up and runs fine.
ts-node-dev --transpile-only ./src/app.ts
However, I encounter errors whenever I try to compile the app to deploy to a server
ts-node ./src/app.ts && tsc
Note: This error occurs occurs running just ts-node ./src/app.ts before it gets to tsc
The errors that shown during the build process are the following:
/Users/user/checkouts/project/node_modules/ts-node/src/index.ts:500
return new TSError(diagnosticText, diagnosticCodes)
^
TSError: ⨯ Unable to compile TypeScript:
src/types/SomeObject.ts:11:7 - error TS2339: Property 'date' does not exist on type 'ObjectDefinitionBlock<"SomeObject">'.
11 t.date('createdAt')
Does anyone have any ideas on either:
a) How can I work around this error? While long-term solutions are ideal, temporary solutions would also be appreciated.
b) Any steps I could follow to debug this error? Or ideas on how get additional information to assist with debugging?
Any assistance would be very much welcomed. Thanks!
The issue seems to be resolved when --transpile-only flag is added to the nexus:reflect command.
This means the reflection command gets updated to:
ts-node --transpile-only ./src/app.ts
and the build comand gets updated to:
env-cmd -f ./config/.env ts-node --transpile-only ./src/app.ts --nexusTypegen && tsc
A github issue has also been created which can be reviewed here: https://github.com/graphql-nexus/schema/issues/690
I am attempting to launch a Dagster pipeline run with the GraphQL API. I have Dagit running locally and a working pipeline that I can trigger via the playground.
However, I am now trying to trigger the pipeline via GraphQL Playground, available at /graphql.
I am using the following mutation:
mutation ExecutePipeline(
$repositoryLocationName: String!
$repositoryName: String!
$pipelineName: String!
$runConfigData: RunConfigData!
$mode: String!
)
...and hence am providing the following query params:
{
"repositoryName": "my_repo",
"repositoryLocationName": <???>,
"pipelineName": "my_pipeline",
"mode": "dev",
"runConfigData": {<MY_RUN_CONFIG>}
}
I am not sure what value repositoryLocationName should take? I have tried a few but receive the following error:
{
"data": {
"launchPipelineExecution": {
"__typename": "PipelineNotFoundError"
}
}
}
This is the tutorial I am following.
Short answer:
Each repository lives inside a repository location. Dagster provides a default repository location name if you do not provide one yourself. To find the location name, you can click the repository picker in Dagit, and it'll be next to the repository name:
In this example, the repository name is toys_repository, and the location name is dagster_test.toys.repo
Longer answer:
A workspace (defined with your workspace.yaml) is a collection of repository locations.
There are currently three types of repository locations:
Python file
Python module
gRPC server
Each repository location can have multiple repositories. Once you define the location, Dagster is able to automatically go find all the repositories in that location. In the example above, I defined my workspace to have a single Python module repository location:
load_from:
- python_module: dagster_test.toys.repo
Note that simply specified a module and did not specify a repository location name, so Dagster assigned a default repository location name.
If I wanted to specify a location name, I would do:
load_from:
- python_module:
module_name: dagster_test.toys.repo
location_name: "my_custom_location_name"
Similarly for a python file location:
load_from:
- python_file: repo.py
Or with a custom repository location name:
load_from:
- python_file:
relative_path: repo.py
location_name: "my_custom_location_name"
You can also find out using a GraphQL query. Starting from the example provided in the documentation, you just need to add
repositoryOrigin {
repositoryLocationName
}
resulting in
query PaginatedPipelineRuns {
pipelineRunsOrError {
__typename
... on PipelineRuns {
results {
runId
pipelineName
status
runConfigYaml
repositoryOrigin {
repositoryLocationName
}
stats {
... on PipelineRunStatsSnapshot {
startTime
endTime
stepsFailed
}
}
}
}
}
}
This will return the repository location name for any run that is returned. Trigger the pipeline that you want the location name for in the UI before querying and that run will be your first result.
I have an Angular/Apollo GraphQL implementation generating typescript code based on GraphQl endpoint which is surfacing a schema. I can hit the endpoint via Postman with a query and results are returned. However, when I run "graphql-codegen --config codegen.yml" via npm I get this error:
"Error: Query root type must be provided"
The server side is .Net Core implementation using GraphQL ASPNetCore. I have 4 different queries defined and each one works via graphiql.
Any ideas on why query root type is now being returned as null?
GraphQL must have at least one #Query() to be considered valid. So maybe only need add any Query to your Resolver code will be helpful.
Ex:
export class FooResolver {
#Query(() => String)
sayHello(): string {
return 'Hello World!';
}
}
This error throws when your schema stiching/definitions are incorrect. Please check the check your root schema definitions
https://www.advancedgraphql.com/content/schema-stitching
I was having the same issue while using graphql-codegen.
my codegen.yml is
overwrite: true
schema: "http://localhost:3001/graphql"
documents: "src/app/graphql/*.graphql"
generates:
src/generated/graphql.ts:
plugins:
- typescript
- typescript-operations
- typescript-apollo-angular
The issue was coming when I used the plugin typescript-apollo-angular.
I'm using Nodejs with graphql as backend.
The issue got resolved when I renamed the type
RootQuery -> Query
and
RootMutation -> Mutation
in backend schema.
Before
type RootQuery {
_empty: String
}
type RootMutation {
_empty: String
}
schema {
query: RootQuery
mutation: RootMutation
}
After
type Query {
_empty: String
}
type Mutation {
_empty: String
}
schema {
query: Query
mutation: Mutation
}
I ended up reverting back to a previous version of the codebase and reapplied my modifications manually and it works now. The only thing I can think of is I ran npm update which updated apollo-angular from 1.8.3 to 1.10.0.
EDIT Here is my code:
codegen.yml (used to generate code from npm command):
overwrite: true
schema: "https://to_end_point/Prod/api/v1/GraphQL"
documents: "src/**/*.graphql"
generates:
src/generated/graphql.ts:
plugins:
- "typescript"
- "typescript-operations"
- "typescript-apollo-angular"
./graphql.schema.json:
plugins:
- "introspection"
After reverting back to a previous version of Angular code then re-applying my code modifications, GraphQl code generation worked again. The only thing I can think of which could have caused this issue was when I ran npm update. Below is a screenshot of before/after of package.json:
Is it possible to separate a page graphql query in a separate .graphql file, and then import it in the page file? I assume I need to add some kind og .graphQL loader?
If you want to write your query, mutation with .graphql or .gql file extension.
You need graphql-tag/loader, here is my webpack.config.js:
{
test: /\.(graphql|gql)$/,
exclude: /node_modules/,
use: 'graphql-tag/loader'
}
You can use graphql-import to do that.
Example:
Assume the following directory structure:
.
├── schema.graphql
├── posts.graphql
└── comments.graphql
schema.graphql
# import Query.*, Mutation.* from "posts.graphql"
# import Query.*, Mutation.* from "comments.graphql"
posts.graphql
# import Comment from 'comments.graphql'
type Post {
comments: [Comment]
id: ID!
text: String!
tags: [String]
}
comments.graphql
type Comment {
id: ID!
text: String!
}
You can see full document in here
check 'apollo-universal-starter-kit' - should be adaptable to gatsby
To my knowledge that's not possible out of the box. The only way to split up queries is with Fragments:
https://www.gatsbyjs.org/docs/querying-with-graphql/#fragments
However if you want to get a discussion started I'd recommend opening an issue on GitHub.