8
votes

I've got a type called Article in my schema:

type Article {
  id: ID!
  updated: DateTime
  headline: String
  subline: String
}

For updates to it, there's a corresponding input type that is used by a updateArticle(id: ID!, article: ArticleInput!) mutation:

input ArticleInput {
  headline: String
  subline: String
}

The mutation itself looks like this:

mutation updateArticle($id: ID!, $article: ArticleInput!) {
  updateArticle(id: $id, article: $article) {
    id
    updated
    headline
    subline
  }
}

The article is always saved as a whole (not individual fields one by one) and so when I pass an article to that mutation that I've previously fetched, it throws errors like Unknown field. In field "updated", Unknown field. In field "__typename" and Unknown field. In field "id". These have the root cause, that those fields aren't defined on the input type.

This is correct behaviour according to the spec:

(…) This unordered map should not contain any entries with names not defined by a field of this input object type, otherwise an error should be thrown.

Now my question is what a good way to deal these kinds of scenarios is. Should I whitelist properties that are allowed on the input type in my app code?

If possible I'd like to avoid this and maybe have a utility function slice them off for me which knows about the input type. However, since the client doesn't know about the schema, this would have to happen on the server side. Thus, the unnecessary properties would be transferred there, which I suppose is the reason why they shouldn't be transferred in the first place.

Is there a better way than a whitelist?

I'm using apollo-client, react-apollo and graphql-server-express.

2
Can you please show the actual mutation that you're calling? It sounds like something else is amiss here. - marktani
Thanks for the quick response @marktani! I've added the mutation code to the question. - amann
Do you have the possibility to run a "raw" mutation against your server? That is, using GraphiQL or a HTTP client like curl or fetch. I want to understand if this is an error thrown by Apollo or thrown by your server. - marktani
I've just simulated the request with a curl. The error is definitely thrown by the server. Removing the fields that are unknown to the input type fixes the problem. - amann
Exactly, the root cause seems to be that the mutation doesn't know about those fields. My preferred solution would have been that they are ignored, but that would involve transferring them to the server, which I guess is the reason this isn't supported. Sadly I can't share the endpoint with you, but I guess every GraphQL endpoint will respond in the same way when a mutation is called with an input type that includes extra fields. - amann

2 Answers

9
votes

So the most elegant way I could think of is using a fragment for the query, which includes all mutable fields of the data. That fragment can be used by the filter utility of graphql-anywhere to remove all unwanted data before the mutation happens.

The gist is:

const ArticleMutableFragment = gql`
fragment ArticleMutable on Article {
  headline
  subline
  publishing {
    published
    time
  }
}
`

const ArticleFragment = gql`
fragment Article on Article {
  ...ArticleMutable
  id
  created
  updated
}
${ArticleMutableFragment}
`;

const query = gql`
query Article($id: ID!) {
  article(id: $id) {
    ...Article
  }
}
${ArticleFragment}
`;

const articleUpdateMutation = gql`
mutation updateArticle($id: ID!, $article: ArticleInput!) {
  updateArticle(id: $id, article: $article) {
    ...Article
  }
}
${ArticleFragment}
`;

...

import {filter} from 'graphql-anywhere';

...

graphql(articleUpdateMutation, {
  props: ({mutate}) => ({
    onArticleUpdate: (id, article) =>
      // Filter for properties the input type knows about
      mutate({variables: {id, article: filter(ArticleMutableFragment, article)}})
  })
})

...

The ArticleMutable fragment can now also be reused for creating new articles.

0
votes

I've personally had same idea and took @amann 's approach earlier, but after some time the conceptual flaw of using query fragments on input types became evident. You would'n have an option to pick input type field that isn't present in (corresponding) object type - is there even any?

Currently I'm describing my input data by typesafe-joi schemas and using it's stripUnknown option to filter out my form data.

Invalid data never leaves form so valid data can be statically typed.

In a sense, creating joi schema is same activity as defining "input fragment" so no code duplication takes place and your code can be type-safe.