typescript apollo gql react 将变量传递给功能组合答案

【问题标题】：typescript apollo gql react pass in variables to functional compositiontypescript apollo gql react 将变量传递给功能组合
【发布时间】：2020-09-05 00:03:39
【问题描述】：

我正在尝试以这样的功能方式将变量注入 GQL 查询

const ALL_PEOPLE_QUERY = gql`
  query All_People_Query {
    allPeople {
      people {
        id
        name
      }
    }
  }
`;

interface Data {
  allPeople: {
    people: Array<{ id: string; name: string }>;
  };
};

interface Variables {
  first: number;
};

const AllPeopleComponent = <Query<Data, Variables> query={ALL_PEOPLE_QUERY}>
  {({ loading, error, data }) => { ... }}
</Query>

来自here

做这样的事情


export const AllPeopleComponent = () => (<Query<Data, Variables> query={ALL_PEOPLE_QUERY}>
  {({ loading, error, data }) => { ... }}
</Query>
);


ReactDOM.render(<ApolloProvider client={client}><AllPeopleComponent/></ApolloProvider>, document.getElementById('list'));

但是如何在 reactDom 调用中将变量注入到查询中？

【问题讨论】：

标签： reactjs typescript graphql apollo

【解决方案1】：

所以自己回答这个问题

我最终在我的架构上使用了codegen，并在我的codegen.yml中使用了这个

overwrite: true
schema: "<endpoint>"
documents: "src/**/*.graphql"
generates:
  src/generated/schemagql.tsx:
    plugins:
      - "typescript"
      - "typescript-operations"
      - "typescript-react-apollo"
  ./graphql.schema.json:
    plugins:
      - "introspection"

请务必注意，文档指的是实际查询、突变等，而不是架构定义中的任何内容。所以对于上面的，有一个文件可以匹配（这里改成添加一个变量）

  query All_People_Query( $name: String!) {
    allPeople(name: $name) {
      people {
        id
        name
      }
    }
  }

这将生成你需要的所有类型

最后一点

const AllPeopleComponent = (props: !!GeneratedVariables!!) => {
  const {data, error ,loading} = useQuery<!!GeneratedQuery!!,!!GeneratedVariables!!>(!!GeneratedDocument!!, { variables: { name: props.name } });
  if (loading)
    return <div>Loading...</div>;
  }

  if (error || !data) {
    return <div>ERROR</div>;
  }

  return !!some html!!
};

ReactDOM.render(<ApolloProvider client={client}><AllPeopleComponent name="value"/></ApolloProvider>, document.getElementById('root'));

这是未经测试的，因为它基于 Apollo 文档，但请参阅我的 repo 它确实有效

【讨论】：