new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

TanStack Query · React · all subjects

integration/graphql

4 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Using graphql-request and GraphQL Code Generator for type-safe queries

React Query can be combined with graphql-request^5 and GraphQL Code Generator to provide full-typed GraphQL operations. This ensures both the query data and variables are type-checked.

Type-safe GraphQL with React Query example

import request from 'graphql-request' import { useQuery } from '@tanstack/react-query' import { graphql } from './gql/gql' const allFilmsWithVariablesQueryDocument = graphql(/* GraphQL */ ` query allFilmsWithVariablesQuery($first: Int!) { allFilms(first: $first) { edges { node { id title } } } } `) function App() { const { data } = useQuery({ queryKey: ['films'], queryFn: async () => request( 'https://swapi-graphql.netlify.app/.netlify/functions/index', allFilmsWithVariablesQueryDocument, { first: 10 }, ), }) } This example shows a fully type-safe GraphQL query with React Query where the data and variables are both type-checked at compile time.

Using AbortSignal with graphql-request versions before v4.0.0

For graphql-request versions lower than v4.0.0, pass the signal parameter from the query function to the GraphQLClient constructor.

Example: graphql-request < v4.0.0 with query cancellation

const query = useQuery({ queryKey: ['todos'], queryFn: ({ signal }) => { const client = new GraphQLClient(endpoint, { signal, }) return client.request(query, variables) }, })

Give your agent this brain